[Chapter 17] 17.2 The Form Object
Author: David Flanagan
Date: Fri Aug 29 11:03:09 1997

#

| Chapter 17 Forms and Form Elements |

## 17.2 The Form Object

The JavaScript Form object represents an HTML form. Forms are always found as elements of the `forms[]` array, which is a property of the Document object. Forms appear in this array in the order that they appear within the document. Thus, `document.forms[0]` refers to the first form in a document, and you can refer to the last form in an document with:

    document.forms[document.forms.length]

The most interesting property of the Form object is the `elements[]` array, which contains JavaScript objects (of various types) that represent the various input elements of the form. Again, elements appear in this array in the order that they appear in the document. So `document.forms[1].elements[2]` refers to the third element of the second form in the document of the current window.

The remaining properties of the Form object are of less importance. They are `action`, `encoding`, `method`, and `target`, and they correspond directly to the `ACTION`, `ENCODING`, `METHOD`, and `TARGET` attributes of the `<FORM>` tag. These properties and attributes are all used to control how form data is submitted to the web server, and where the results are displayed, and they are therefore only useful when the form actually will be submitted to a CGI script. See the reference section for an explanation of the properties, or see a book on HTML or CGI programming[2] for a thorough discussion of the attributes. What is worth noting here is that these Form properties are all read/write strings in Navigator 2.0 and 3.0, so a JavaScript program can dynamically set their values in order to change the way the form is submitted. Unfortunately, while you can set the value of these properties in Internet Explorer 3.0, any values you set will be ignored.

> [2] Such as CGI Programming on the World Wide Web, by Shishir Gundavaram, published by O'Reilly & Associates.

In the days before JavaScript, forms were submitted with a special-purpose Submit button, and the form elements had their values reset with a special-purpose Reset button. The JavaScript Form object, however, supports two methods, `submit()` and (in Navigator 3.0) `reset()`, which serve this same purpose. Invoking the `submit()` method of a Form submits the form, exactly as if the user had clicked on a Submit button, and invoking `reset()` resets the form elements, exactly as if the user had clicked on a Reset button.

To accompany the `submit()` and `reset()` methods, the Form object provides the `onSubmit()` event handler to detect form submission, and (in Navigator 3.0) the `onReset()` event handler to detect form resets. The `onSubmit()` handler is invoked just before the form is submitted, and can cancel the submission by returning `false`. This provides an opportunity for a JavaScript program to check the user's input for errors to avoid submitting incomplete or invalid data over the network to a CGI program. We'll see an example of doing this at the end of this section.

The `onReset()` event handler is similar to the `onSubmit()` handler. It is invoked just before the form is reset, and may prevent the form elements from being reset by returning `false`. This allows a JavaScript program to ask for confirmation of the reset, which can be a good idea when the form is long or detailed. You might request this sort of confirmation with an event handler like the following (recall that `onReset()` requires Navigator 3.0):

    <FORM...
         onReset="return confirm('Really erase ALL data and start over?')"
    >

Forms in CGI and JavaScript |  | Form Elements