Chapter 13

Fiddling with Forms and Emulating Events


In This Chapter

Welcome to the end of this semester's JavaScript course. You'll close out the day with some fun stuff—just like the last day of class in grade school, when you cracked the windows, broke out the Yahtzee, and ate pizza on the same desk you took math quizzes on all year. Actually, I'm just fooling. This chapter is about form objects and emulating events, neither of which hold a candle to pizza and Yahtzee.

Behind the Form

The form is a staple of virtually any page that interacts with the user. Forms can take the "form" of several incarnations, from buttons to check boxes to blank text entry boxes. You will probably want to create JavaScript functions that in some way interpret the data produced by these forms.

Because of our close examination of forms in this chapter, you’d better break tradition and refresh yourself with HTML form tags.

You define a form in HTML with the tag <FORM>. This tag may contain several possible attributes, as listed here:

Attribute Description

You should keep in mind the following information about forms:

Having established all this, let's begin looking at how the forms object works within JavaScript.

Element and Object

To avoid confusion throughout this chapter, let's clear up the difference between the terms "element" and
"object." A form element, such as a check box, is an "element" when you are speaking from an HTML 
perspective. However, the same check box is an object when you are speaking from a JavaScript perspective.
At times, I may seem to use these terms interchangeably because they do ultimately refer to the same "thing.” 
But when I say "element," I'm looking at it from an HTML point of view, and when I say "object," I'm 
considering it from a JavaScript point of view.

Object of Form

The previous chapter briefly mentioned that forms was a property of document. This is true, but furthermore, document.forms is an object itself. Each form within the document is one property of document.forms. This is important, so let's take this concept again—slowly.

Remember that a form is defined by anything between one set of <FORM> tags:

<FORM>

form element definitions

Thus, document.forms[0] refers to the first form defined in the document. Likewise, document.forms[1] refers to the second form; that is, any form elements defined within a second set of <FORM> </FORM> tags somewhere else in the document.

Now each form in a document is also an object. Therefore, document.forms[0] is an object whose properties are each an element of that form. The elements are referred to in the manner document.forms[x].elements[y], where x is the form in question, and y is the element within that form.

Imagine that your HTML document contains the following lines:

<FORM name=someform>
<INPUT TYPE="button" name="ad" value="Click for Ad" onClick="showad()">
<INPUT TYPE="checkbox" name="married">Are you married?
</FORM>

This form contains two elements: a button and a check box. If this is the first form defined in your document, you can refer to its parts in the following manner:

Alternatively, you can refer to each form element by its name if it is defined in the <INPUT> tag. You can also refer to each form by its name if it is defined in the <FORM> tag. If so, the following statements would be true:

What do I mean when I say, "would contain the definition for the button element?" It means that the value of document.forms[0].elements[0] in this example would be the following string:

"<INPUT TYPE="button" name="ad" value="Click for Ad" onClick="showad()">".

Shortly, you'll see how to refer to specific portions of each element, so you don’t have to use its entire definition.

Properties of Forms

The forms object, like every other object, has a set of built-in properties. Basically, these simply help you to retrieve or modify the main attributes of the form. The following subsections give you all the details.

The action Property

The method Property

The target Property

Elements, Up Close and Personal

I’ve touched on the fact that the array (or object) elements point to each particular element within a given form. Good. Then recall again the example in the form you defined earlier in this chapter: document.forms[0].elements[0] would contain the definition for the button element. Now the button element in question here also contains several properties of its own. So consider the button element definition again:

<INPUT TYPE="button" name="ad" value="Click for Ad" onClick="showad()">

The button has a name, which in this case is ad. Thus, you can retrieve or modify its name in JavaScript with a reference like this:

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

You might assign the value of the preceding line to a new variable, or you might assign a new string to the line. Each particular form element has its own slightly different set of built-in properties. The button object contains a name property, as you've just seen, as well as a value property. In the case of the button, the value property (as well as the value HTML attribute) is the text that appears on the button itself on-screen. Thus, you can also refer to this value:

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

The checkbox Element

A New Type of Property

In JavaScript 1.1, the type property has been added to each form element object. Simply, the type property reflects the “type” of form element, as defined in the HTML <INPUT TYPE=”elementtype”> tag or the <SELECT> <SELECT MULTIPLE> and <AREA> tags, in the cases of selection boxes or image map areas.

For instance, imagine that your HTML document contained the following form element definition:

<form name=formica>
<input type="text" size="3" name="age">
</form>
The following JavaScript 1.1 code would yield the value “text”:
formtype = document.formica.age.type

Radio Button Matters

In the case of a radio button, the radio button set is an array containing each individual button. For instance,
consider this HTML code:

To access the type property of the “male” radio button, you use this:

More generally, to access any property of the radio button set, use this:

The this Object

The Faked Event

It's All in the Method

Event emulators are methods of the form element objects. Each of the form element objects has a click() method. Simply call this method for the object in question, and it will be clicked. Therefore, to click a check box, you might use the call

document.forms[0].checkboxname.click()

Important note: A click() method does not initiate an event trigger. Only a "real" click on the check box would trigger the onClick event handler, if defined. If you want to emulate a click and trigger the appropriate event call, simply call the proposed event handler manually after the click() method. For example, let's say your onClick event handler is defined as "married(this.checkbox.value)". If you want to emulate a click and call the event handler, simply use the following JavaScript statements:

document.forms[0].checkboxname.click() ;
married(this.value)

All you did was call the event handler explicitly following the emulated click because it would not have been triggered by the onClick definition.

Before you run through the example code for the "spicy food" logic, remind yourself how radio buttons work. A radio button is basically a multiple-choice question, from which the user can select only one of the proposed choices. What makes the radio button slightly different from other form elements is that it may contain several subelements; that is, the radio button named "spicetype" could have three subelements, each representing a choice: Mexican, Indian, or Don't like.

The following is the HTML code wherein you define the check box and radio buttons for the spicy foods example.

<FORM>
<INPUT NAME="spicy" TYPE="checkbox">Do you like spicy foods?<p>

Please select which spicy food is your favorite:

Note how each part of the radio button is defined to the same NAME= attribute. This is important. Also, see how each radio button definition contains the same onClick event handler? As a result, anytime a user makes a choice from the radio button, the verification function checkspicy(document.forms[0].spicy.checked) will be called. This is the heart of the logic.

The function's role will be to look at the Boolean (logical) state of the check box named "spicy" (document.forms[0].spicy.value) and either allow the user's radio button selection to remain or force a different selection. You would force a different selection under two conditions:

Here is the function code in JavaScript:

Use the construction spicetype[x] to refer to an individual choice x within the radio button set. Here, first consider whether spicy is checked true. If so, look to see if the last radio button choice (button number 2 because they start counting from 0) is selected. If so, it should not be (because the user indicated that he does like spicy foods). Therefore, you emulate a click event to check "Mexican" (radio button choice 0).

If the user has indicated a distaste for spicy foods, look at the else clause above and determine if the final radio button choice has been selected. If not, emulate a click event to select it because it must be selected in this case.

The reset() method

The Least You Need to Know

Previous Chapter Next Chapter


Beginning of ChapterTable of ContentsBook Home PageQue Home Page


For comments or technical support for our books and software, select Talk to Us.
To order books, call us at 800-716-0044 or 317-228-4366.

© 1997, QUE Corporation, an imprint of Macmillan Publishing USA, a Simon & Schuster Company.