HTML and CSS Reference
In-Depth Information
The
onSubmit
Event Handler.
Another important form event handler, called
onSub-
mit
, 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.
EXAMPLE
11.11
<html>
<head><title>onSubmit Event Handler and Forms</title>
<script type="test/JavaScript">
1
function readySubmit()
{
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>
EXPLANATION
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.
