reset()

The reset() method resets a given form and is equivalent to clicking the Reset button. Its syntax and usage is exactly the same as the submit method. See the onReset event handler for more information on resetting a form.

Properties

action

The action property reflects the value of the <FORM> tag’s ACTION attribute. Its value is the URL of a CGI or LiveWire application on the server which needs to execute upon submission. If no explicit URL for the server-side application is specified, the value of action in Navigator 3.0 defaults to the URL of current document (the one containing the form), while Microsoft Internet Explorer, on the other hand, defaults the property to an empty string.

The formReference.action property can also be assigned a value by JavaScript. You can take advantage of this feature to modify the form’s behavior after the page has been laid out, according to the user’s preferences.

In general, you can assign the form’s properties by JavaScript, instead of HTML attributes. Take a look at the following form example:

<FORM NAME="form1" METHOD="post"
ACTION="http://www.foo.com/trash.cgi">
...
</FORM>

An alternative to this construct is the following combination of HTML and JavaScript:

<FORM NAME="form1" METHOD="post">
...
</FORM>
<SCRIPT LANGUAGE="JavaScript">
<!--

document.form1.action = "http://www.foo.com/trash.cgi"

// -->
</SCRIPT>

This example is just to demonstrate how you can assign a property. In practice, HTML is much preferred, for reasons explained later in this chapter.

Notice that Netscape Navigator and MSIE 3.0 deal differently with relative URLs. The following statement, executed as part of a form layout:

document.forms[0].action = "bla.cgi"

yields different values of document.forms[0].action in Netscape Navigator and IE:

bla.cgi // IE
http://currentDirectoryPath/bla.cgi // Netscape Navigator

elements

The elements property is an array of objects corresponding to the form elements. It is a property of any form and is referenced as formReference.elements.

As you already know, since all form objects are elements of the document.forms object, it is possible to refer to a specific form within a document if you know its index in relationship to the other forms in the document. Similarly, a specific form’s elements are elements of the elements array. The first element of this array is a reference to the first form element (button, checkbox, hidden, password, radio, reset, select, submit, text, or textarea object), the second entry is a reference to the second form element, and so on, in source order. For example, if a form has one text box and three radio buttons, you can reference these elements as formReference.elements[0], formReference.elements[1], formReference.elements[2], and formReference>.elements[3].

Like the forms array, the elements array is an alternative to referencing by name. Some programmers prefer to use array reflection, whereas others prefer to trace elements by their names. It is convenient to implement the elements array when a form contains many elements that are related to indexes. A form with ten text boxes which accepts ten telephone numbers, for example, should be referenced via the elements array. Such referencing will allow you to use a loop to iterate through the ten different elements.

Usually, though, you will use forms to collect data fields of different meanings which are not similar to each other as the phone numbers in the previous example. In such cases, referencing by name is much more convenient and easier to understand, follow, and maintain. You can easily redesign the physical layout of the form or even add new elements in the middle while keeping the old references. If you use the elements array, on the other hand, any layout modification causes the indexes to shift, invalidating all previous references.

The number of elements in a form is formReference.elements.length. Therefore, the last element in a form is reflected by the formReference.elements[formReference.elements.length – 1] entry.

Elements in the elements array are read-only, so the following statement, for example, has no effect:

formReference.elements[0] = "do not do this"

The first few elements of the elements array represent the form elements. The following property, length, reflects the number of form elements. You would expect the list to end here, but Netscape added all forms properties to the elements array, starting at this index. In general, although we explain it here in detail, you should avoid referencing a form object’s properties through its elements property. This feature is not documented and is not supported by IE.

Figure 22-3.  A list of a typical elements object’s properties.

Suppose a form element evaluates to foo. Then, the following references all evaluate to foo:

document.forms[0].elements[0].value
document.forms[0].elements.elements[0].value
document.forms[0].elements.elements.elements[0].value

These bizarre references are possible due to the fact that an elements object contains all the properties of its form, in addition to the form’s elements. A form, say document.forms[0], can also have a property named name reflecting the value of the NAME attribute of the corresponding <FORM> tag. You can also reference this property in Navigator using one of the following known methods:

document.forms[0].name
document.forms[0].elements.name
document.forms[0].elements.elements.name

You may recall from Chapter 8 that the for…in loop statement provides the capability to list an object’s properties, top to bottom. The following function can be used to list the properties of a typical elements object by name (not index):

function printElements(form, formString) {
 // initialize output string
 var result = ""

 for (var i in form.elements) {
  result += formString + ".elements." + i + " = " +
   form.elements[i] + "\r"
 }

 alert(result)
}