If the event is trigtrig-gered from within the tag, this refers to the current form, but if it is triggered by an element within the form, such as an input device, then it references t
Trang 111.4.5 The this Keyword
The this keyword is especially helpful when dealing with forms We used the this word
when working with objects as a reference to the current object For forms containing
multiple objects, such as checkboxes, radio buttons, and textboxes, it is easier to refer
to the object with the this keyword than by using its full name when calling a function
When using an event handler, the this keyword always refers to the object that
trig-gered the event If the event is trigtrig-gered from within the <form> tag, this refers to the
current form, but if it is triggered by an element within the form, such as an input device,
then it references that element Each element has a form property that references the
form in which it was created In the following segment of an HTML document, note that
when the onClick event handler is triggered within the first button input type, the form
property is used to reference the form itself, whereas in the second button, the this
key-word refers to the current button
Figure 11.21 The user clicked the Reset Form button The dialog box confirms the
choice before the input boxes are reset to their default values.
F O RM A T
<input type="button" < This a JavaScript element
value="Print Form Stuff"
onClick="display_formval(this.form);" /> < this keyword references the
form object by using the
element’s form property
<input type="button"
value="Print Button Stuff"
onClick="display_buttonval(this);" /> < this keyword references the
current object, the button
</form>
Trang 2E X A M P L E 1 1 1 3
<html>
<head><title>An HTML form and the "this" keyword and
Event Handler</title>
<script type="text/javascript">
2 if(form1.your_name.value == ""){
// Check for an empty string
3 alert("Please type in your name");
return(false);
} else{
return(true);
} }
</script>
</head>
<body><b>
4 <form method="post"
action="http://localhost/cgi-bin/check.pl"
onSubmit="return checkForm(this)"><p>
<big><p>
Type your name here:
5 <input type="text" name="your_name" size="50" />
<br /><br />
6 <input type="submit" value="Submit" />
<input type="reset" value="Clear" />
</form>
</body>
</html>
E X P L A N A T I O N
1 The function called checkForm() is assigned to the onSubmit event When the user
clicks the submit button, the event is triggered and as a result, the checkForm
function is called The this argument is a reference to this form In checkForm, the
parameter is called form1, called on line 4 with the this keyword, which is a
refer-ence to the form
2 When following the DOM hierarchy, form1 refers to document.forms[0] The text
field was named your_name on line 5 Now it can be referenced as
docu-ment.form1.your_name The value property refers whatever was entered in the text
field We are checking to see if the text field is the empty string, in which case we
will alert the user
3 The user is alerted to enter his or her name in the text field
4 The onSubmit handler sends one argument, this, to the function checkForm() The
keyword this is a shorthand name for the current object; in this example the
cur-rent object is a form, document.forms[0].
Trang 3Using the button Input Type Rather than submit. As shown in the previous
examples, before the browser sends data to the server, an onSubmit or onClick event
han-dler is triggered when the user clicks the submit button or presses the Enter key But
what if you don’t want the form to go off to the server? Then you will have to reject the
submission or the browser will reset all the field values to their defaults
If the form is not going to submit data to a server, the button input type can be used
instead of the submit button The button object has no default behavior and is used as a
triggering device so that when the user clicks the button, it causes something to happen
The onClick event handler is commonly used with buttons and is set as an attribute of
the button input type The onClick event handler is triggered when the user clicks the
button associated with it
5 The HTML input type is a text field named your_name, which will display up to
50 characters
6 The HTML input type is a submit button When the user clicks this button, the
onSubmit handler in line 4 is triggered If the return value from the function
check_Form is true, the form will be submitted to the server, located at the URL
shown in the action attribute of the form named info.
E X A M P L E 1 1 1 4
<html>
<head><title>button input type</title>
<script type="text/javascript">
alert("Why did you click me like that? ");
}
</script>
</head>
<body>
2 <form name="form1">
<! event handler for a button is an attribute for its input type >
3 <input type="button"
value="Click me!"
4 onClick="greetme()" />
</form>
</body>
</html>
E X P L A N A T I O N
1 This function called greetme() is called when the user clicks the button device.
2 A form called form1 is started.
Continues
E X P L A N A T I O N (C O N T I N U E D)
Trang 411.4.6 The submit() and reset() Methods
In addition to event handlers (fully discussed in Chapter 13), JavaScript provides two
methods for the forms object, the submit() and the reset() methods These methods
emu-late the event handlers of the same name: The submit() method submits the form just as
though the user had clicked the submit button, and the reset() method resets the form
elements to their defaults just as if the user had clicked the reset button Neither of these
methods trigger the onSubmit or onReset event handlers (Note that the methods must
be spelled with lowercase letters.) These methods allow you to ask for user
confirma-tion, check input data, and so on, before sending the form to the server for processing
3 The input type is a simple graphical button containing the text “Click me!”
4 When the user clicks the button, the onClick event handler is triggered and the
function called greetme() is called It will send an alert dialog box to the screen, as
shown in Figure 11.22
Figure 11.22 Using a button to call a function.
E X A M P L E 1 1 1 5
<html>
<head><title>An HTML Form</title></head>
<body>
<b>
1 <form name=myForm
action="http://localhost/cgi-bin/environ.pl"
method="post">
<p>
<fieldset><legend><big> All About You</legend>
<p><font size=3 color="blue">
Type your name here:
2 <input type="text"
name="namestring"
size="50" />
E X P L A N A T I O N (C O N T I N U E D)
Trang 5<p>
Talk about yourself here:<br />
3 <textarea name="comments"
align="left"
rows="5" cols="50">I was born
</textarea>
<p>
<b>Choose a work place:</b><br />
4 <input type="checkbox"
name="place"
value="LA" />Los Angeles
<br />
<input type="checkbox"
name="place"
value="SJ" />San Jose
<br />
<input type="checkbox"
name="place"
value="SF"
checked />San Francisco
<p></fieldset>
</form>
<p>
5 <a href="#" onClick="JavaScript: myForm.submit();" />
Click here to submit this form</a>
<p>
6 <a href="#" onClick="JavaScript: myForm.reset();" />
Click here to reset this form</a>
</body>
</html>
E X P L A N A T I O N
1 The form called myForm starts here When the form is submitted, it will go to the
address assigned to the action attribute, and the method—how the form is sent—
is the post method.
2 The text field input type will accept a line of text from the user
3 The text area box will accept up to 5 rows of text from the user
4 The user can select any of the checkboxes The default, San Francisco, is checked.
5 The link has been deactivated with the # When the user clicks the link, the
on-Click event will be triggered and cause the JavaScript submit() method to be
in-voked (see Figure 11.23) The form data will be sent to the URL assigned to the
action attribute of the form The URL is a CGI program residing on the local
serv-er Note that there is no need for the submit button here
6 The link has been deactivated with the # When the user clicks the link, the
on-Click event will be triggered and cause the JavaScript reset() method to be
in-voked The input boxes will all be cleared and set back to their default values
E X A M P L E 1 1 1 5 (C O N T I N U E D)
Trang 6Displaying a Form’s Content in a Popup Window. After filling out a form, you
might want to display the form content for confirmation before submitting it to a server
This can be done by creating another window, called a popup, and outputting the form
data dynamically into that window Example 11.16 uses JavaScript to open a new
win-dow to display the gathered form data from another file
Figure 11.23 When the user clicks one of the links, either the submit() or the reset()
method will be invoked.
E X A M P L E 1 1 1 6
<html>
<head><title>Display Form Input</title>
<script type="text/javascript">
2 NewWin=window.open('','','width=300,height=200');
3 name_input="<b>Your name: " + myform.user_name.value
+ "</b><br />";
phone_input="<b>Your phone: " + myform.user_phone.value + "</b><br />";
}
NewWin.window.close();
}
</script>
</head>
Trang 7<body><hr><h3> Display form data in a little window</h2><p>
7 <form name="formtest">
8 Please enter your name: <br />
<input type="text" size="50" name="user_name" />
<p>
Please enter your phone: <br />
<input type="text" size="30" name="user_phone" />
</p><p>
9 <input type="button"
value="show form data"
onClick="showForm(this.form)"; />
</form>
</p>
<big>
10 <a href="JavaScript:void(0)" onClick="close_window()">
Click here to close little window</a>
</big>
</body>
</html>
E X P L A N A T I O N
1 A JavaScript function called showForm() is defined Its only parameter is a
refer-ence to the name of the form; in this example, myform.
2 A new window object is created with the window’s open() method
3 The variable called name_input is assigned a string that will contain HTML tags
and the value that was assigned to the form’s text field
4 The document of the new window will display the string value assigned to the
variable name_input in line 3
5 The document of the new window will display the string value assigned to
phone_input.
6 This function will close the new window
7 The HTML form called formtest starts here
8 The input type for this form consists of two text fields that will be used to obtain
the name and the phone of the user
9 When the button input device is clicked, the onClick handler will be invoked This
is when you will see the new little window appear on the screen with all the form
data
10 The JavaScript void(0) operator has the effect of deactivating the link so that it will
not try to go to some URL when clicked (like the # in Example 11.17) Instead,
event handler close_window() will be invoked and the little window that was
opened to display the form data will be closed See Figure 11.24
E X A M P L E 1 1 1 6 (C O N T I N U E D)
Trang 811.5 Programming Input Devices (Controls)
With JavaScript, you can alter the contents of the form’s input devices dynamically (also
called controls or elements) Because each input device is an object, each has properties
and methods, and can be manipulated like any other JavaScript object (i.e., it can be
assigned to, changed, deleted, etc.) You can program checkboxes, assign values to text
areas and textboxes, change the value in fields, add choices to drop-down menus, verify
password entries, and do all of this on the fly The following section shows you how to
program input devices
Figure 11.24 Form data is displayed in another window, called a popup window.