HomeJavaScript Page 6 - Understanding The JavaScript Event Model (part 1)
Forty Two - JavaScript
This may be news to you, but JavaScript comes with a powerfuland flexible event model, one which provides developers with astandardized way of trapping and handling client-side events likekeystrokes and mouse clicks. This two-part article takes an in-depthlook at how this event model works, demonstrating some practical (andnot-so-practical) uses of the most common event handlers.
JavaScript also includes a bunch of event handlers for forms and form elements, including text fields, selection lists, and buttons.
The onSubmit handler is triggered when a form is submitted. This handler is usually placed in the <form> tag. For example, consider the following form, which asks the user to enter a value into the text field and then pops up an alert with a message incorporating that value:
<html>
<head>
<script language="JavaScript">
function printMessage()
{
alert("No, the answer is not " + document.forms[0].answer.value
+ ".\nEveryone knows the answer is 42.");
return false;
}
</script>
</head>
<body>
<form action="submit.php" method="post" onSubmit="return
printMessage()"> What is the answer? <br> <input type="text"
name="answer"> <br> <input type="submit" value="Tell me the answer!">
</form>
</body>
</html>
Of course, this isn't all that useful. Here's another, more practical example:
<html>
<head>
<script language="JavaScript">
// check name field
function checkName()
{
// if empty, pop up alert
if (document.forms[0].name.value == "")
{
alert("Please enter a valid name");
return false;
}
else
{
return true;
}
}
// check email field
function checkEmail()
{
var flag;
var str = document.forms[0].email.value;
// regex to match email addresses
var pattern =
/^([a-zA-Z0-9])+([\.a-zA-Z0-9_-])*@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-]+)+/;
var flag = pattern.test(str);
if(!flag)
{
alert ("Please enter a valid email address");
return false;
}
else
{
return true;
}
}
// function to check all form data
function checkForm()
{
if (checkName() && checkEmail())
{
return true;
}
else
{
return false;
}
}
</script>
</head>
<body>
<form action="submit.php" method="post" onSubmit="return checkForm()">
Please enter your name. <br> <input type="text" name="name"> <p> Please
enter your email address. <br> <input type="text" name="email"
size="25"> <br> <input type="submit" value="Hit me!"> </form>
</body>
</html>
In case you haven't figured this one out yet, it pops up a warning dialog box if the user attempts to submit the form with an invalid name or email address - very useful when you want to cut down on mistyped or incorrect data being entered into your forms.
There's one important quirk of the onSubmit handler that you should know about, because I've used it in both scripts above. Once the onSubmit event handler is invoked, the browser decides whether or not to process the form further on the basis of the value returned by the event handler. If the handler returns false, the form is not processed further; if it returns true, the form is submitted to the named form processing script.
As the example above demonstrates, this comes in particularly handy when attempting to perform JavaScript-based validation of form data. It's possible to write a comprehensive set of JavaScript routines to verify the data entered into the form by the user, activate these routines via the onSubmit handler once the user submits the form, and only process the data in the form if the validation routines return a positive result. This is a technique used commonly on the Web to reduce the incidence of bad data entry.
JavaScript 
/ 36 
