Chapter 15. Forms and Form Elements
As we've seen in examples throughout this book, the use of HTML
forms is basic to almost all JavaScript programs. This chapter
explains the details of programming with forms in JavaScript. It is
assumed that you are already somewhat familiar with the creation of
HTML
forms and with the input elements that they contain. If not, you may
want to refer to a good book on HTML.[50] The client-side
reference section of this book lists the HTML syntax along with the
JavaScript syntax for forms and form elements; you may find these
useful for quick reference.
If you are already familiar with server-side programming using HTML
forms, you may find that things are done differently when forms are
used with JavaScript. In the server-side model, a form with the input
data it contains is submitted to the web server all at once. The
emphasis is on processing a complete batch of input data and
dynamically producing a new web page in response. With JavaScript,
the programming model is quite different. In JavaScript programs, the
emphasis is not on form submission and processing but instead on
event handling. A form and all input elements in it have event
handlers that JavaScript can use to respond to user interactions
within the form. If the user clicks on a checkbox, for example, a
JavaScript program can receive notification through an event handler
and might respond by changing the value displayed in some other
element of the form.
With server-side programs, an HTML form isn't useful unless it
has a Submit
button (or unless it has only a single text input field and allows
the user to press the Return key as
a shortcut for submission). With JavaScript, on the other hand, a
Submit button is never necessary
(unless the JavaScript program is working with a cooperating
server-side program, of course). With JavaScript, a form can have any
number of push buttons with event handlers that perform any number of
actions when clicked. In previous chapters, we've seen some of
the possible actions that such buttons can trigger: replacing one
image with another, using the location property to
load and display a new web page, opening a new browser window, and
dynamically generating a new HTML document in another window or
frame. As we'll see later in this chapter, a JavaScript event
handler can even trigger a form to be submitted.
As we've seen in examples throughout this book, event handlers
are almost always the central element of any interesting JavaScript
program. And the most commonly used event handlers (excluding the
event handlers of the Link object) are those used with forms or form
elements. This chapter introduces the JavaScript Form object and the
various JavaScript objects that represent form elements. It concludes
with an example that illustrates how you can use JavaScript to
validate user input on the client before submitting it to a
server-side program running on the web server.
15.1. 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 in which they appear within the document. Thus,
document.forms[0] refers to the first form in a
document. You can refer to the last form in a document with the
following:
document.forms[document.forms.length-1]
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 same order they appear in the document. So you can
refer to the third element of the second form in the document of the
current window like this:
document.forms[1].elements[2]
The remaining properties of the Form
object are of less importance. The
action ,
encoding, method, and
target properties 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; they are therefore
useful only when the form is actually submitted to a server-side
program. See the client-side reference section for an explanation of
the properties, or see a book on HTML or CGI programming[51] for a thorough discussion of the attributes. What is
worth noting here is that these Form properties are all read/write
strings, so a JavaScript program can dynamically set their values in
order to change the way the form is submitted.
In the days before JavaScript, a form was
submitted with a special-purpose Submit button, and form elements had their
values reset with a special-purpose Reset button. The JavaScript Form object
supports two methods, submit(
) and
(as of JavaScript 1.1) reset( ), that serve the
same purpose. Invoking the submit( ) method of a
Form submits the form, and invoking reset( )
resets the form elements.
To
accompany the submit( ) and reset(
) methods, the Form object provides the
onsubmit event handler to detect form
submission and (as of JavaScript 1.1) the
onreset event handler to detect form resets.
The onsubmit handler is invoked just before the
form is submitted; it can cancel the submission by returning
false. This provides an opportunity for a
JavaScript program to check the user's input for errors in
order to avoid submitting incomplete or invalid data over the network
to a server-side program. We'll see an example of such error
checking at the end of this chapter. Note that the
onsubmit handler is triggered only by a genuine
click on a Submit button. Calling
the submit( ) method of a form does not trigger
the onsubmit handler.
The onreset event handler
is similar to the onsubmit handler. It is invoked
just before the form is reset, and it can 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:
<form...
onreset="return confirm('Really erase ALL data and start over?')"
>
Like the onsubmit handler,
onreset is triggered only by a genuine Reset button. Calling the reset(
) method of a form does not trigger
onreset.
 |  |  | 14.10. Embedded Data |  | 15.2. Defining Form Elements |
Copyright © 2003 O'Reilly & Associates. All rights reserved.
|