CD-472 Part VI ✦ Appendixes Example The following statement assigns a mailto: URL to the first form of a page: document.forms[0].action = “mailto:jdoe@giantco.com” elements NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓ Example The document in Listing 23-2 demonstrates a practical use of the elements prop- erty. A form contains four fields and some other elements mixed in between (see Figure 23-2). The first part of the function that acts on these items repeats through all the elements in the form to find out which ones are text box objects and which text box objects are empty. Notice how I use the type property to separate text box objects from the rest, even when radio buttons appear amid the fields. If one field has nothing in it, I alert the user and use that same index value to place the inser- tion point at the field with the field’s focus() method. Listing 23-2: Using the form.elements Array <HTML> <HEAD> <TITLE>Elements Array</TITLE> <SCRIPT LANGUAGE=”JavaScript”> function verifyIt() { var form = document.forms[0] for (i = 0; i < form.elements.length; i++) { if (form.elements[i].type == “text” && form.elements[i].value == “”){ alert(“Please fill out all fields.”) form.elements[i].focus() break } // more tests } // more statements } </SCRIPT> </HEAD> FORM.elements CD-473 Appendix F ✦ Examples from Parts III and IV <BODY> <FORM> Enter your first name:<INPUT TYPE=”text” NAME=”firstName”><P> Enter your last name:<INPUT TYPE=”text” NAME=”lastName”><P> <INPUT TYPE=”radio” NAME=”gender”>Male <INPUT TYPE=”radio” NAME=”gender”>Female <P> Enter your address:<INPUT TYPE=”text” NAME=”address”><P> Enter your city:<INPUT TYPE=”text” NAME=”city”><P> <INPUT TYPE=”checkbox” NAME=”retired”>I am retired </FORM> <FORM> <INPUT TYPE=”button” NAME=”act” VALUE=”Verify” onClick=”verifyIt()”> </FORM> </BODY> </HTML> Figure 23-2: The elements array helps find text fields for validation. FORM.elements CD-474 Part VI ✦ Appendixes encoding enctype NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓ Example If you need to modify the first form in a document so that the content is sent in non- URL-encoded text at the user’s request, the statement is: document.forms[0].encoding = “text/plain” length NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓ Example Use The Evaluator (Chapter 13) to determine the number of form controls in the first form of the page. Enter the following statement into the top text box: document.forms[0].length method NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓ Example If you need to modify the first form in a document so that the content is sent via the POST method, the statement is: document.forms[0].method = “POST” FORM.method CD-475 Appendix F ✦ Examples from Parts III and IV target NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓ Example If you want to direct the response from the first form’s CGI to a new window (rather than the target specified in the form’s tag), use this statement: document.forms[0].target = “_blank” Methods reset() NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ ✓✓✓ Example In Listing 23-3, I assign the act of resetting the form to the HREF attribute of a link object (that is attached to a graphic called reset.jpg). I use the javascript: URL to invoke the reset() method for the form directly (in other words, without doing it via function). Note that the form’s action in this example is to a nonexistent URL. If you click the Submit icon, you receive an “unable to locate” error from the browser. Listing 23-3: form.reset() and form.submit() Methods <HTML> <HEAD> <TITLE>Registration Form</TITLE> </HEAD> <BODY> <FORM NAME=”entries” METHOD=POST ACTION=”http://www.u.edu/pub/cgi-bin/register”> Enter your first name:<INPUT TYPE=”text” NAME=”firstName”><P> Continued FORM.reset() CD-476 Part VI ✦ Appendixes Listing 23-3 (continued) Enter your last name:<INPUT TYPE=”text” NAME=”lastName”><P> Enter your address:<INPUT TYPE=”text” NAME=”address”><P> Enter your city:<INPUT TYPE=”text” NAME=”city”><P> <INPUT TYPE=”radio” NAME=”gender” CHECKED>Male <INPUT TYPE=”radio” NAME=”gender”>Female <P> <INPUT TYPE=”checkbox” NAME=”retired”>I am retired </FORM> <P> <A HREF=”javascript:document.forms[0].submit()”><IMG SRC=”submit.jpg” HEIGHT=25 WIDTH=100 BORDER=0></A> <A HREF=”javascript:document.forms[0].reset()”><IMG SRC=”reset.jpg” HEIGHT=25 WIDTH=100 BORDER=0></A> </BODY> </HTML> submit() NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓ Example Consult Listing 23-3 for an example of using the submit() method from outside of a form. Event handlers onReset NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ ✓✓✓ FORM.onReset CD-477 Appendix F ✦ Examples from Parts III and IV Example Listing 23-4 demonstrates one way to prevent accidental form resets or submis- sions. Using standard Reset and Submit buttons as interface elements, the <FORM> object definition includes both event handlers. Each event handler calls its own function that offers a choice for users. Notice how each event handler includes the word return and takes advantage of the Boolean values that come back from the confirm() method dialog boxes in both functions. Listing 23-4: The onReset and onSubmit Event Handlers <HTML> <HEAD> <TITLE>Submit and Reset Confirmation</TITLE> <SCRIPT LANGUAGE=”JavaScript”> function allowReset() { return window.confirm(“Go ahead and clear the form?”) } function allowSend() { return window.confirm(“Go ahead and mail this info?”) } </SCRIPT> </HEAD> <BODY> <FORM METHOD=POST ENCTYPE=”text/plain” ACTION=”mailto:trash4@dannyg.com” onReset=”return allowReset()” onSubmit=”return allowSend()”> Enter your first name:<INPUT TYPE=”text” NAME=”firstName”><P> Enter your last name:<INPUT TYPE=”text” NAME=”lastName”><P> Enter your address:<INPUT TYPE=”text” NAME=”address”><P> Enter your city:<INPUT TYPE=”text” NAME=”city”><P> <INPUT TYPE=”radio” NAME=”gender” CHECKED>Male <INPUT TYPE=”radio” NAME=”gender”>Female <P> <INPUT TYPE=”checkbox” NAME=”retired”>I am retired<P> <INPUT TYPE=”reset”> <INPUT TYPE=”submit”> </FORM> </BODY> </HTML> FORM.onReset CD-478 Part VI ✦ Appendixes onSubmit NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓ Example See Listing 23-4 for an example of trapping a submission via the onSubmit event handler. LABEL Element Object Property htmlFor NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ Example The following statement uses W3C DOM-compatible syntax (IE5+ and NN6) to assign a form control reference to the htmlFor property of a label: document.getElementById(“myLabel”).htmlFor = document.getElementById(“myField”) LABEL.htmlFor CD-479 Appendix F ✦ Examples from Parts III and IV Chapter 24 Examples The following sections contain examples from Chapter 24, “Button Objects.” The BUTTON Element Object and the Button, Submit, and Reset Input Objects Properties form NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓ Example The following function fragment receives a reference to a button element as the parameter. The button reference is needed to decide which branch to follow; then the form is submitted. function setAction(btn) { if (btn.name == “normal”) { btn.form.action = “cgi-bin/normal.pl” } else if (btn.name == “special”) { btn.form.action = “cgi-bin/specialHandling.pl” } btn.form.submit() } Notice how this function doesn’t have to worry about the form reference, because its job is to work with whatever form encloses the button that triggers this function. Down in the form, two buttons invoke the same function. Only their names ulti- mately determine the precise processing of the button click: <FORM> <INPUT TYPE=”button” NAME=”normal” VALUE=”Regular Handling” onClick=”setAction(this)”> <INPUT TYPE=”button” NAME=”special” VALUE=”Special Handling” onClick=”setAction(this)”> </FORM> document.formObject.buttonObject.form CD-480 Part VI ✦ Appendixes name NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓ Example See the example for the form property earlier in this chapter for a practical applica- tion of the name property. value NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓ Example In the following excerpt, the statement toggles the label of a button from “Play” to “Stop” except in NN/Mac through NN4: var btn = document.forms[0].controlButton btn.value = (btn.value == “Play”) ? “Stop” : “Play” Methods click() NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓ Example The following statement demonstrates how to script a click action on a button form control named sender: document.forms[0].sender.click() document.formObject.buttonObject.click() CD-481 Appendix F ✦ Examples from Parts III and IV Event handlers onClick NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓ Example Listing 24-1 demonstrates not only the onClick event handler of a button but also how you may need to extract a particular button’s name or value properties from a general-purpose function that services multiple buttons. In this case, each button passes its own object as a parameter to the displayTeam() function. The function then displays the results in an alert dialog box. A real-world application would probably use a more complex if else decision tree to perform more sophisti- cated actions based on the button clicked (or use a switch construction on the btn.value expression for NN4+ and IE4+). Listing 24-1: Three Buttons Sharing One Function <HTML> <HEAD> <TITLE>Button Click</TITLE> <SCRIPT LANGUAGE=”JavaScript”> function displayTeam(btn) { if (btn.value == “Abbott”) {alert(“Abbott & Costello”)} if (btn.value == “Rowan”) {alert(“Rowan & Martin”)} if (btn.value == “Martin”) {alert(“Martin & Lewis”)} } </SCRIPT> </HEAD> <BODY> Click on your favorite half of a popular comedy team:<P> <FORM> <INPUT TYPE=”button” VALUE=”Abbott” onClick=”displayTeam(this)”> <INPUT TYPE=”button” VALUE=”Rowan” onClick=”displayTeam(this)”> <INPUT TYPE=”button” VALUE=”Martin” onClick=”displayTeam(this)”> </FORM> </BODY> </HTML> document.formObject.buttonObject.onClick . retired </FORM> <P> <A HREF= javascript: document.forms[0].submit()”><IMG SRC=”submit.jpg” HEIGHT=25 WIDTH=100 BORDER=0></A> <A HREF= javascript: document.forms[0].reset()”><IMG. form contains four fields and some other elements mixed in between (see Figure 23-2). The first part of the function that acts on these items repeats through all the elements in the form to find. Array <HTML> <HEAD> <TITLE>Elements Array</TITLE> <SCRIPT LANGUAGE= JavaScript > function verifyIt() { var form = document.forms[0] for (i = 0; i < form.elements.length;