Looping Through the Forms and Elements Array
Accessing forms and form elements in JavaScript can be accomplished several different ways. As you've seen from previous examples, paths to forms and form elements can be followed by the name assigned them via the html name attribute.

However, a generic and sometimes more convenient reference used to access these element objects exists. It is known as array notation, and is a combination of a generic reference to a type of element object, and a number representing that specific object's location in the document's flow. A similar array notation reference is a combination of the generic reference and the name. Say there are two forms on the page, the first form containing one element:

<form name="formOne">
<input type="text" name="elementOne">
</form>

Take a look at three different ways to code the path to the first form element in the first form on a page.

document.formOne.elementOne
document.forms[0].elements[0]
document.forms["formOne"].elements["elementOne"]

For standards compliant browsers using the HTML attribute ID, there is yet another path:

<input type="text" id="elementOne">
document.getElementById("elementOne")

Since CGI scripts require name/value pairs (not ID/value pairs) from forms, and for the sake of code compatibility between the painfully uneven support amongst varying browsers, these tutorials do not use the latter convention when dealing with forms and form elements.

As you can see, just as different forms on a single page can be referenced as part of the forms array, form elements can be referenced as part of the elements array. When it comes to looping through forms and their elements, array syntax using numbers as element indices is the most efficient and simple convention.

This technique is applied most practically when performing form validation. Looping through elements allows for easy checks of empty values, names, element types and other properties and values specific to element types. The following example will loop through each element of the form, checking various properties and values. Here is the HTML form:

<form>
   <input type="text" size="15" value="Hello World" name="elmOne">
   <input type="checkbox" name="elmTwo" checked>
   <textarea name="elmThree">Small textarea</textarea>
   <select name="elmFour">
      <option selected>Yellow
      <option>Green
   </select>
   <input type="button" onclick="elmName()" name="elmFive" value="Display Names">
   <input type="button" onclick="elmLoop()" name="elmSix" value="Display Various Properties and Values">
</form>

Small textarea
YellowGreen

The function that displays the names only:

function elmName(){

   for(i=0; i<document.forms[0].elements.length; i++){
   alert(document.forms[0].elements[i].name)
   }

}

And the function displaying the various properties and values:

function elmLoop(){

var theForm = document.forms[0]

   for(i=0; i<theForm.elements.length; i++){
   var alertText = ""
   alertText += "Element Type: " + theForm.elements[i].type + "\n"

      if(theForm.elements[i].type == "text" || theForm.elements[i].type == "textarea" || theForm.elements[i].type == "button"){
      alertText += "Element Value: " + theForm.elements[i].value + "\n"
      }
      else if(theForm.elements[i].type == "checkbox"){
      alertText += "Element Checked? " + theForm.elements[i].checked + "\n"
      }
      else if(theForm.elements[i].type == "select-one"){
      alertText += "Selected Option's Text: " + theForm.elements[i].options[theForm.elements[i].selectedIndex].text + "\n"
      }
   alert(alertText)
   }

}

So you see, you can get as complex and specific as you need to be, but the basis of it all is a simple loop through the elements array. See Netscape's DevEdge Chapter 7 Documentation for more element objects and properties.

While on the subject of forms, I'd like to point out a common mistake new scripters make when scripting forms. If a statement referencing a form or element is sitting outside a function body or event handler and is located before the HTML form it is referencing in a document's flow, the browser will return a script error. Because statements outside a function body or event handler are executed as soon as the browser encounters them, the engine will not find the referenced form or element because it has not been loaded and built yet. This goes for any other element object in a document.

View the Source