- The Basics of HTML Forms
- Using the form Object with JavaScript
- Scripting Form Elements
- Displaying Data from a Form
- Sending Form Results by Email
- Workshop: Validating a Form
- Summary
- Q&A
- Quiz
- Exercises
This chapter is from the book
This chapter is from the book
This chapter is from the book
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.
Alternately, 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.
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.
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.
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.
NOTE
If you use the submit method to send data to a server or by email, Netscape will prompt the user to verify that she wants to submit the information. There's no way to do this behind the user's back.
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 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.