Fun With Forms

I have been spending a lot of time improving my Form Utility Framework and wanted to share a little with you. First, we should address the reasons why we would want a Form Utility Framework. Here are some of my reasons:

  • Serialization for ajax - converts forms into key/value pair string (ex. "&key1=value1&key2=value2…"), often used with AJAX requests
  • Validation - rather than writing code to manually validate each form, i developed a system that allows you to add any number of validators for any number of fields in a form
  • Abstracted Value Retrieval - a universal method used to always retrieve the value of an input whether it is an input, a select, or a textarea HTML tag, so you do not need to remember how or worry about x-browser issues
  • Helper Methods - functions such as ones that: retrieve inputs by name, gets the first visible input of the form, disable/enable forms, etc.

Since every page will not always have a form and the Form Utility Framework will not always be used, try to keep it as lightweight as possible; it is easy to bloat your Utility with functions that you infrequently or never use.

If you find yourself using a Form Utility Framework, you might run into this problem that I had. I had not used the reset HTMLInput type in a long time and found myself wanting to use it to clear the fields in a form. In the past that had always worked for me, but if you are using a server-side scripting language to set the values of the form fields when the page load, then you will find that resetting the form does not clear it. Instead, it reverts to the values that the form had when the page loaded. This is because in most modern browsers, when initializing a page that sets the form field value attribute, those values also are set the the fields defaultValue attribute. According to the W3C standards, the defaultValue attribute is what should be used for form resetting. Therefore, if the form fields had no values when the page load, then the reset function worked as I wanted, otherwise, it did not. To defeat this I created my own method clear that iterates through the different form field elements and removes their values.

if (! Form) {Form = {};}
Form.clear = function(form, ingore) {
	var inputs = form.getElementsByTagName(input);
	// inputs
	for (var i=0, input; input=inputs[i]; i++) {
		if (-1 == ingore.indexOf(input.type.toLowerCase())) {
			input.value = "";
			if (input.checked) {input.checked = false;}
	// textareas
	if (-1 == ingore.indexOf(textarea)) {
		inputs = form.getElementsByTagName(textarea);
		for (var i=0, input; input=inputs[i]; i++) {
			input.value = "";
	// selects
	if (-1 == ingore.indexOf(select)) {
		inputs = form.getElementsByTagName(select);
		for (var i=0, sel; sel=inputs[i]; i++) {
			sel.selectedIndex = 0;

This method is pretty straight forward. Pass the method an HTMLFormElement Object and it will parse through the objects child nodes by the tag names using the appropriate reset method. Lastly, I tossed in an array called ignore (array of string types that are not to be cleared), because I often dont want to reset types such as "button", "hidden", "submit", and "reset". I was thinking, it might be helpful also to have a list of field names to ignore, but I did not have a need for it yet.