Home arrow JavaScript arrow 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.

TABLE OF CONTENTS:
  1. Understanding The JavaScript Event Model (part 1)
  2. Popeye() And Olive()
  3. Handling Things
  4. Red Alert
  5. Mouse Hunt
  6. Forty Two
  7. Flavour Of The Month
  8. Linking Up
  9. Game Over
By: Team Melonfire, (c) Melonfire
Rating: starstarstarstarstar / 36
June 25, 2002

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement
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.

 
 
>>> More JavaScript Articles          >>> More By Team Melonfire, (c) Melonfire
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

JAVASCRIPT ARTICLES

- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: