Fiddling with Forms and Emulating Events
In This Chapter
Behind the Form
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:
You should keep in mind the following information about forms:
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
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
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 element definitions
Thus, document.forms refers to the first form defined in the document. Likewise, document.forms 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 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:
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.elements in this example would be the following string:
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
This property allows you to retrieve or alter the value of the action attribute of the form in question. For example, suppose you want to submit the form data to one URL if the user has bought more than a certain number of mugs, or to another URL if he purchased fewer. You might use the classic if...else statement to change the property documents.forms.action. This could take place in a function called buymugs(mugs), which accepts the parameter of how many mugs were bought. The function would be called as an event handler from the event trigger onSubmit, an attribute of <FORM>.
Let's play out the code for this scenario:
Looking first at the HTML code, you define a form that contains one element: a text entry box that is three spaces wide. This text entry box is given the reference name “quantity.” The FORM definition specifies an onSubmit event handler. It calls the function buymugs() with the parameter this.quantity.value. this refers to this whole object (the form) from which you are interested in the property “quantity,” which is the specific element within the form named quantity. value is a property of the text entry object, which contains the data the user enters.
The function itself is much the same as previous functions you coded in these chapters. It simply uses an if...else statement to determine a condition and to modify the ACTION= attribute of the first form in your document accordingly.
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.elements 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:
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:
The checkbox Element
Because each form element serves a slightly different purpose, each object has a slightly different set of built-in properties. Let's consider the check box element, which could be defined in this way:
Imagine that the preceding is the second element of the same form that contains the previous button, thus making it documents.forms.elements. The name property of this checkbox object works the same way as the name property of the button object.
The checkbox object also contains two unique properties: checked and defaultChecked. These are logical values that, when assigned a true or false value, determine the starting state of the check box (before the user gets his hands on it). Sometimes, you might want a check box to begin in a checked state. You can make it so either by changing the HTML definition of the element or by assigning a true value, as in the following:
Note that the value property works differently for the checkbox than for the button. In the preceding checkbox, the property documents.forms.elements.value is a Boolean that contains the state of the check box. This is what you would refer to if you were processing this form.
In the "Built-In Objects" section of Appendix A, you can find details about the properties available for each particular form element object. Here, you looked at only the button and check box elements.
A New Type of Property
For instance, imagine that your HTML document contained the following form element definition:
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:
formtype = document.formica.sex.type
More generally, to access any property of the radio button set, use this:
variable = document.formica.sex[buttonidx].propertyName
The this Object
One of the most important constructions with which you refer to form elements is the this construction. By now, you've seen it pop up several times. Take an official look at it now.
Clearly, a construction such as document.forms.elements.value is somewhat long and unwieldy. However, when you are referring to form elements from within a particular form definition, you don't have to use such a long construction.
If you are between <FORM> </FORM> tags, the form to which you are referring is a given: this form. Therefore, document.forms[x] can be assumed.
Secondly, you can refer to individual form elements by their name, instead of by elements[y], which makes more sense to the human programmer. Thus, the first element—a button—in your continuing form example from above, could be called elements, or it could be called ad. (Recall that you named it ad with the NAME= attribute.)
Therefore, when you refer to a form from within its definition (which you do anytime you define an event handler for the form or element), you can use the simpler construction this.elementname.property. You've seen this in practice a few times. Here's an example that combines a couple of your previous this uses:
Two event handlers are defined in the preceding form. One handles the onSubmit event and passes to its function the parameter this.email.value. That, then, would be the data entered (value) into the form element email (the text box defined in the second line of the example).
The second event handler occurs in the onClick event of the check box element. It passes to its function the parameter this.marstat.value, which would contain the Boolean state of the check box named marstat.
When in Doubt, Be Specific I have found some inconsistencies
practice versus how it claims that it should be handled. The simplest solution to any strange errors or
difficulties with this is simply to replace the use of this with document.forms[x].
The Faked Event
Suppose you have the following two elements in your form: a check box that poses the question, "Do you like spicy foods?" and a radio button set that asks the user to choose which spicy food is his favorite. The radio buttons offer three choices: "Mexican," "Indian," and "I said I didn't like spicy foods."
Suppose the user deselects the latter check box (which indicates a lack of enthusiasm for spicy foods). In that case, it would be nonsensical for the user to then check one of the regional food types in the radio button set. So how can you prevent the user from saying he doesn't like spicy foods but that his favorite spicy food is Indian?
Using event emulation! (Boy, you knew that was coming, I hope.) This would be the programming logic:
This way, no matter what the user tries to select in the radio buttons, his selection will be overridden if it conflicts with a previous selection.
You will code the above logic shortly. But first let's see how to emulate an 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
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.
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.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.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:
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
For comments or technical support for our books and software, select Talk to Us. © 1997, QUE Corporation, an imprint of Macmillan Publishing USA, a Simon & Schuster Company.
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.