JavaScript Bible, Gold Edition part 199 pps

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 Examp

Trang 1

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

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 typeproperty 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>

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

Trang 2

<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>

</FORM>

</BODY>

</HTML>

Figure 23-2: The elements array helps find text fields for validation.

FORM.elements

Trang 3

encoding enctype

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

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

Example

If you need to modify the first form in a document so that the content is sent via the

POSTmethod, the statement is:

document.forms[0].method = “POST”

FORM.method

Trang 4

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()

Example

In Listing 23-3, I assign the act of resetting the form to the HREFattribute 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>

Continued

FORM.reset()

Trang 5

Listing 23-3 (continued)

<INPUT TYPE=”radio” NAME=”gender” CHECKED>Male

<INPUT TYPE=”checkbox” NAME=”retired”>I am retired

</FORM>

<P>

</BODY>

</HTML>

submit()

Example

Consult Listing 23-3 for an example of using the submit()method from outside of a form.

Event handlers

onReset

FORM.onReset

Trang 6

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 returnand 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>

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()”>

<INPUT TYPE=”radio” NAME=”gender” CHECKED>Male

<INPUT TYPE=”checkbox” NAME=”retired”>I am retired<P>

</FORM>

</BODY>

</HTML>

FORM.onReset

Trang 7

Example

See Listing 23-4 for an example of trapping a submission via the onSubmitevent handler.

LABEL Element Object

Property

htmlFor

Example

The following statement uses W3C DOM-compatible syntax (IE5+ and NN6) to assign a form control reference to the htmlForproperty of a label:

document.getElementById(“myLabel”).htmlFor = document.getElementById(“myField”)

LABEL.htmlFor

Trang 8

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

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

Trang 9

Example

See the example for the formproperty earlier in this chapter for a practical applica-tion of the nameproperty.

value

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()

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()

Trang 10

Event handlers

onClick

Example

Listing 24-1 demonstrates not only the onClickevent handler of a button but also

how you may need to extract a particular button’s nameor valueproperties 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 elsedecision tree to perform more

sophisti-cated actions based on the button clicked (or use a switchconstruction on the

btn.valueexpression for NN4+ and IE4+).

Listing 24-1: Three Buttons Sharing One Function

<HTML>

<HEAD>

<TITLE>Button Click</TITLE>

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>

</FORM>

</BODY>

</HTML>

document.formObject.buttonObject.onClick

Định dạng
Số trang	10
Dung lượng	555,49 KB