Sams Teach Yourself JavaScript in 24 Hours

Using the form Object with JavaScript

Each form in your HTML page is represented in JavaScript by a form object, which has the same name as the NAME attribute in the <form> tag you used to define it.

Alternatively, you can use the forms array to refer to forms. This array includes an item for each form element, indexed starting with 0. For example, if the first form in a document has the name form1, you can refer to it in one of two ways:

document.form1
document.forms[0]

The form Object's Properties

Along with the elements, each form object also has a list of properties, most of which are defined by the corresponding <form> tag. You can also set these from within JavaScript. They include the following:

• action is the form's action attribute, or the program to which the form data will be submitted.

• encoding is the MIME type of the form, specified with the enctype attribute. In most cases, this is not needed. See the "Sending Form Results by Email" section of this hour for an example of its use.

• length is the number of elements in the form. You cannot change this property.

• method is the method used to submit the form, either GET or POST. This determines the data format used to send the form result to a CGI script, and does not affect JavaScript.

• target specifies the window in which the result of the form (from the CGI script) will be displayed. Normally, this is done in the main window, replacing the form itself, but you can use this attribute to work with pop-up windows or frames.

Submitting and Resetting Forms

The form object has two methods, submit() and reset(). You can use these methods to submit the data or reset the form yourself, without requiring the user to press a button. One reason for this is to submit the form when the user clicks an image or performs another action that would not usually submit the form.

Detecting Form Events

The form object has two event handlers, onSubmit and onReset. You can specify a group of JavaScript statements or a function call for these events within the <form> tag that defines the form.

If you specify a statement or a function for the onSubmit event, the statement is called before the data is submitted to the CGI script. You can prevent the submission from happening by returning a value of false from the onSubmit event handler. If the statement returns true, the data will be submitted. In the same fashion, you can prevent a Reset button from working with an onReset event handler.