5 When the user clicks the Submit button, the form is sent to the URL server pro-gram assigned to the action attribute of the tag.. But if a JavaScript event handler is set up, then whe
Trang 111.4.4 Submitting Fillout Forms
Submitting an HTML Form Without JavaScript. When the user clicks a submit
button, the form is normally sent to the server for further processing by another
appli-cation such as a PHP, ASP.NET, or CGI script Before the server gets the form, its content
is gathered by the browser, URL encoded, and then sent to the address supplied in the
action attribute of the form (In the previous examples, the action attribute was not used
because there was no reason to process the user input in the sample forms.) The
appli-cation on the server side decodes and processes the form information From there, an
acknowledgment can be sent back to the user, an e-mail delivered, the processed
infor-mation sent to a database, or whatever else we define Now let’s look at an example of
an HTML form and how it is submitted to a server application After the user fills out
the form, he or she will click the Submit button The form data will be collected by the
browser as name/value pairs and sent to the server The method attribute determines how
the data is sent (as a query string or message body) and the action attribute determines
where it will be sent (the URL of a server)
Figure 11.15 What went wrong? Watch your spelling! We tried to reference a form
by the wrong name!
E X A M P L E 1 1 8
<html>
<head><title>An HTML Form</title></head>
<body><big><strong>
1 <form action="/cgi-bin/bookstuff/form1.cgi" method="post"><p>
<fieldset><legend>All About You</legend>
<p>
Type your name here:
2 <input type="text" name="namestring" size="50" />
</p>
<b>Choose a work place:</b><br />
3 <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 <br />
Trang 2<br />
<input type="radio" name="status"
value="senior" id="senior" />
<label for="senior">senior</label>
<br />
<input type="radio" name="status" value="adult" id="adult" />
<label for="senior">adult</label>
<br />
<input type="radio" name="status" value="child" id="child" />
<label for="senior">child</label>
<br />
<br />Choose a vacation spot:<br />
4 <select multiple name="location" />
<option selected value="hawaii"> Hawaii </option>
<option value="bali">Bali </option>
<option value="maine">Maine </option>
<option value="paris">Paris </option>
</select>
<p>
</fieldset>
5 <input type="submit" value="Submit" />
6 <input type="reset" value="Clear" />
</p>
</form>
7 </big>
</strong>
</body>
</html>
E X P L A N A T I O N
1 The form starts here The action attribute contains the URL of the server program
that will get the form The method being used (how the form will be sent) is the
post method This is the most common method used with forms.
2 The user is asked to type something into a text field box
3 The user is asked to check a box for his or her place of work
4 The user is asked to select a vacation spot from a select menu, or drop-down list
Because this is set to multiple, it allows more than one option to be chosen
5 When the user clicks the Submit button, the form is sent to the URL (server
pro-gram) assigned to the action attribute of the <form> tag.
6 If the user clicks the Clear button, all fields will be reset to their defaults
7 This tag marks the end of the form See Figure 11.16
E X A M P L E 1 1 8 (C O N T I N U E D)
Trang 3Submitting a Form with an Image Button. The image input type gives you
another way to submit a form You can replace the standard Submit button with a
graph-ical image The src attribute must be included to specify the location (URL) of the image
As with other image tags, the alt attribute (HTML 4.0) should be used to give replacement
text for browsers that cannot load the image Many browsers rely on either the name or
value attribute as alternate text, so if there is any doubt, all three attributes for the same
purpose should be used
Figure 11.16 An HTML form.
E X A M P L E 1 1 9
<html>
<head><title>An Image Input Type</title></head>
<body bgcolor="magenta"> <big>
<div align="center">
Enter your name:
<br />
1 <form action="http://localhost/cgi-bin/example.cgi"
method="post">
2 <input type="text" id="textfield" size=50 />
<p>
Trang 4Submitting a Form with JavaScript (Event Handlers). A discussion of forms
would be incomplete without mentioning how JavaScript implements form events (see
Chapter 13 for a complete discussion) Events are triggered by a user when he or she
initiates some action, like pressing a key, clicking the mouse on a button, or moving the
mouse over a link When such an action occurs, the browser detects it, and depending
3 <input type="image" name="submitbutton" src="submit.gif"
alt="submit" />
<br />
4 <input type="reset">
5 </form>
</div>
</big>
</body>
</html>
E X P L A N A T I O N
1 The HTML form starts here using the POST method to send the form input
2 The input type is text The user enters his or her name here
3 The input type is a GIF image submit button When the user clicks on the image,
the form will be submitted and sent to the CGI program assigned to the form’s
ac-tion attribute The src attribute is assigned the URL of the submit.gif image If the
image can’t be loaded, the alt attribute will cause the word “submit” to appear
where the image should go
4 When the user clicks the Reset button (see Figure 11.17), the textbox will be
cleared
5 The HTML form ends here
Figure 11.17 An image as a submit button (IE).
E X A M P L E 1 1 9 (C O N T I N U E D)
Trang 5called, a form can be validated—something happens See Figure 11.18
With a form, an event handler allows you to control whether the form is submitted
or cleared For example, after the user has filled out the form, normally it is sent right
off to a CGI, PHP, or ASP program on the server side to be processed But if a JavaScript
event handler is set up, then when the user clicks the submit button, the handler can
check the input data, and based on what comes in, determine whether to go ahead with
the submission of the form data or reject it without refreshing the page That way, the
user doesn’t have to wait for the form to go to the server, have it validated there, and then
sent back for mistakes that could have been corrected right away (See section “Form
Validation with Regular Expressions” on page 765 in Chapter 17 for a complete
discus-sion.) Likewise, before clearing all the values typed into the form, an event handler can
confirm with the user that this is really what he or she wants to do, before resetting all
the input devices to their default values
With forms there are two event handlers that allow you to catch the form before it
goes to the server They are the onClick event handler and the onSubmit event handler
The onReset event can be used to clear the form’s input devices or to stop them from
being cleared
The onClick Event Handler. One way to either accept or reject the submission is to
use the onClick event handler The onClick event handler is an attribute of the HTML
sub-mit or button input type When the user clicks the button, the event is triggered, and if the
handler function returns true, the form will be submitted; otherwise, it will be rejected
Figure 11.18 The user initiates an action, and an event is triggered.
E X A M P L E 1 1 1 0
<html>
<head><title>onClick Event Handler and Forms</title>
<script type="text/javascript">
if(confirm("Are you ready to submit your form? ")){
return true;
} else{
return false;
} }
</script>
</head>
Trang 6<body>
2 <form action="http://cgi-bin/testform.cgi"
method="post">
Enter your user id:
3 <input type="text"
name="textbox"
value="" />
<br />
Type your password:
<input type="password"
name="secret" />
<p></p>
4 <input type="submit"
onClick="readySubmit();" />
</form>
</body>
</html>
E X P L A N A T I O N
1 The JavaScript function called readySubmit() is defined It will display a confirm
dialog box If the user clicks OK, a true value will be returned and the form will
be submitted If the user clicks Cancel, false will be returned, and the form will be
stopped (see Figure 11.19)
2 The form starts here When submitted, it will go to the server-side CGI program
The URL of the CGI program is assigned to the action attribute of the HTML
<form> tag.
3 The input types for this form are a text field and a password field
4 When the user clicks the submit button, the onClick event handler is triggered It
will handle the event by invoking the JavaScript function called readySubmit().
Figure 11.19 Submitting a form and the onClick event.
E X A M P L E 1 1 1 0 (C O N T I N U E D)
Trang 7mit, will also be triggered when the user clicks the submit button or presses the Enter key,
just before the form is submitted The onSubmit event handler is added as an attribute of
the <form> tag (and only the <form> tag), to control what happens when the user clicks
the submit button When a function is assigned to the onSubmit event handler, if the
value returned by the function is true, the form will be submitted to the server, but if it
returns false, the form will be stopped and the user will be given a chance to reenter data
in the form Example 11.11 produces the same output as the previous one, but notice
the placement of the handler Instead of being associated with a button, it is associated
with the form and set as an attribute of the <form> tag.
E X A M P L E 1 1 1 1
<html>
<head><title>onSubmit Event Handler and Forms</title>
<script type="test/JavaScript">
if(confirm("Are you ready to submit your form? ")){
return true;}
else{
return false;}
}
</script>
</head>
<body>
<form action="cgi-bin/testform.cgi"
method="post"
2 onSubmit="return(readySubmit());" >
Enter your user id:
<input type="text"
name="textbox"
value="" />
<br />
Type your password:
<input type="password"
name="secret" />
<p>
3 <input type="submit" />
</form>
</body>
</html>
E X P L A N A T I O N
1 The JavaScript function called readySubmit() is defined It will display a confirm
dialog box If the user clicks OK, a true value will be returned and the form will
be submitted If the user clicks Cancel, false will be returned, and the form will be
stopped
Trang 8The onReset Event Handler. The HTML reset button allows the user to clear the
form fields and set them back to their default values JavaScript will let you set up an
onReset event handler to either accept or reject this action This event handler can be
used to make sure that clearing an entire form is really what you want to do before it’s
too late, especially if you’ve done a lot of typing and don’t want to reenter all that data
It is an attribute of the <form> tag.
2 The onSubmit event handler is an attribute of the HTML <form> tag It will catch
the form just before it is sent off to the server When the user clicks the submit
button, the event handler readySubmit() will be invoked If the event handler is
called by the onSubmit attribute of the <form> tag, an explicit return must be used
(see Figure 11.20)
3 The input type is a submit button When the user clicks this button, the JavaScript
onSubmit event is triggered (See line 2.)
Figure 11.20 Submitting a form and the onSubmit event handler.
E X A M P L E 1 1 1 2
<html>
<head><title>The onReset Event</title>
<script type="text/javascript">
2 if(confirm("Do you want to reset the form to its default "
+ " values? ")){
} else{
} }
</script>
</head>
E X P L A N A T I O N (C O N T I N U E D)
Trang 9<body>
5 <form action="http://cgi-bin/testform.cgi"
method="post"
onReset="return resetAll();" />
Enter your user id:
6 <input type="text"
name="textbox"
value="Name? "
id="textbox" />
value="Name? " />
<p>Type your password:
7 <input type="password"
name="secret"
id="secret" />
</p><p>
<input type="submit"/>
8 <input type="reset"
value="Reset Form"/>
</p>
</form>
</body>
</html>
E X P L A N A T I O N
1 The function called resetAll() is defined It is invoked when the onReset event
han-dler is triggered
2 If the user clicks the Reset button on line 8, he or she sees this confirm dialog box,
a true value will be returned by this function, allowing the reset to clear all the
input fields and set them back to their original values
3 If a value true is returned, the fields will be cleared.
4 If a value of false is returned by this function, the reset action will be dismissed.
5 The form starts here The onReset event handler is an attribute of the <form> tag.
6, 7 The input types for this form are a text field and a password field
8 The reset button is used to reset the form fields back to their original values
When this button is clicked, the onReset event handler will be triggered See
Figure 11.21
Trang 1011.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
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>