HTML and CSS Reference
In-Depth Information
on what event is triggered, something will be done in response. A function might be
called, a form can be validated—something happens. See Figure 11.18.
Figure 11.18
The user initiates an action, and an event is triggered.
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.
EXAMPLE
11.10
<html>
<head><title>onClick Event Handler and Forms</title>
<script type="text/javascript">
1
function readySubmit(){
if(confirm("Are you ready to submit your form? ")){
return true;
}
else{
return false;
}
}
</script>
</head>
