javascript bible 4th edition jsb gold chapters phần 9 pot

CD-667 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-668 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-669 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-670 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-671 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-672 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-673 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-674 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 application 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-675 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 CD-676 Part VI ✦ Appendixes Checkbox Input Object Properties checked NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓ Example The simple example in Listing 24-2 passes a form object reference to the JavaScript function. The function, in turn, reads the checked value of the form’s checkbox object ( checkThis.checked) and uses its Boolean value as the test result for the if else construction. Listing 24-2: The checked Property as a Conditional <HTML> <HEAD> <TITLE>Checkbox Inspector</TITLE> <SCRIPT LANGUAGE=”JavaScript”> function inspectBox(form) { if (form.checkThis.checked) { alert(“The box is checked.”) } else { alert(“The box is not checked at the moment.”) } } </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE=”checkbox” NAME=”checkThis”>Check here<P> <INPUT TYPE=”button” NAME=”boxChecker” VALUE=”Inspect Box” onClick=”inspectBox(this.form)”> </FORM> </BODY> </HTML> document.formObject.checkboxObject.checked [...]... function extracts the value, converts it to uppercase (using one of the JavaScript string object methods), and assigns it back to the same field in that form document.formObject.textObject.value CD- 690 Part VI ✦ Appendixes Listing 25-2: Getting and Setting a Text Object’s Value Text Object Value function upperMe(form) { inputStr = form.converter.value... triplet form of color specifications, those values are assigned to the VALUE attributes (Dark Salmon) SELECT.options[index].value CD-702 Part VI ✦ Appendixes Listing 26-6: Using the options[index].value Property Color Changer 2 function seeColor(form) { var newColor = (form.colorsList.options[form.colorsList.selectedIndex].value)... Selecting a Field Text Object Select/Focus // general purpose function to see if a suspected numeric input is a number function isNumber(inputStr) { for (var i = 0; i < inputStr.length; i++) { var oneChar = inputStr.charAt(i) if (oneChar < “0” || oneChar > 9 ) { alert(“Please make sure entries are integers only.”) return false } } return true... positive integer: document.formObject.textObject.select() CD- 693 CD- 694 Part VI ✦ Appendixes Event handlers onBlur onFocus onSelect NN2 Compatibility NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ Example To demonstrate one of these event handlers, Listing... event Handler Text Object Select/Focus // general purpose function to see if a suspected numeric input is a number function isNumber(inputStr) { for (var i = 0; i < inputStr.length; i++) { var oneChar = inputStr.substring(i, i + 1) if (oneChar < “0” || oneChar > 9 ) { alert(“Please make sure entries are numbers only.”) return false } } return... the textarea one row deeper: document.forms[0].output.rows++ TEXTAREA.cols Appendix F ✦ Examples from Parts III and IV CD- 697 Methods createTextRange() NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE5 IE5.5 ✓ Compatibility IE4 ✓ ✓ Example See the example for the TextRange.move() method in Chapter 19 to see how to control the text insertion pointer inside a TEXTAREA element Chapter 26 Examples The following sections... SELECT list is the default selected item: var zeroIsDefault = document.forms[0].listName.options[0].defaultSelected SELECT.options[index].defaultSelected Appendix F ✦ Examples from Parts III and IV CD- 699 options[index].index NN2 Compatibility NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ Example The following statement assigns the index integer of the first option of a SELECT element named... function upperMe(field) { field.value = field.value.toUpperCase() } Enter lowercase letters for conversion to uppercase: document.formObject.textObject.value Appendix F ✦ Examples from Parts III and IV CD- 691 ... Choose a background color: Cornflower Blue Dark Salmon Light Goldenrod Yellow Sea Green selectedIndex NN2 Compatibility... The names and the error message come from the submission process for this demonstration Listing 24-4: Adjusting a CGI Submission Action Checkbox Submission function setAction(form) { if (form.checkThis.checked) { form.action = form.checkThis.value } else { form.action = “file://primaryURL” } return true } . 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. 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. sent via the POST method, the statement is: document.forms[0].method = “POST” FORM.method CD-6 69 Appendix F ✦ Examples from Parts III and IV target NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility