Using Click Interceptions with JavaScript - Building a web form for using click interceptions
(Page 2 of 4 )
I'm going to demonstrate how to use click interceptions with JavaScript by recreating a typical scenario. It involves a simple contact form that collects information about users of a web site, including their first and last names, and their email addresses.
Once the online form has been built correctly, I'll use the click interception technique to catch every form submission and process the submitted data via Ajax. At the end of this process, all of the errors generated when validating user-supplied information will be displayed on the same web page that contains the web form, instead of using a different one. Definitely, this is a simple - yet illustrative - example of how to use click interceptions with JavaScript.
Now that you're aware of how this first example is going to function, below I coded a basic web document that includes the aforementioned online form. Here's how this simple web page looks:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Submitting a web form using AJAX and click interception</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
font: bold 18pt Arial, Helvetica, sans-serif;
color: #000;
}
p{
font: normal 10pt Arial, Helvetica, sans-serif;
color: #000;
}
#formcontainer{
width: 300px;
padding: 5px;
background: #eee;
text-align: right;
padding-right: 100px;
}
#errorcontainer{
width: 300px;
}
</style>
</head>
<body>
<h1>Submitting a web form using AJAX and click interception</h1>
<div id="formcontainer">
<form method="post" action="processform.php">
<p>First Name <input name="fname" type="text" title="Enter your First Name" /></p>
<p>Last Name <input name="lname" type="text" title="Enter your Last Name" /></p>
<p>Email <input name="email" type="text" title="Enter your email address" /></p>
<input name="send" type="submit" value="Send Data" />
</form>
</div>
<div id="errorcontainer"></div>
</body>
</html>
Definitely, understanding how the above web page works isn't rocket science, right? As you can see, in this case I coded a simple online form which allows users to submit some basic information, such as their first and last names, and their email addresses.
The previous web page also includes an "errorcontainer" DIV. As you may guess, this DIV will be used to display all of the error messages triggered when validating the pertinent contact form.
Well, at this point the previous online form has been set up correctly, since under normal conditions it will submit all of the user data to a file called "processform.php." However, here's where click interceptions come in. In the section to come I'm going to show you how to develop a simple JavaScript application which will intercept each mouse click that occurs when the web form is submitted and display the corresponding error messages on the same web page via Ajax.
To see how the click interception technique will be applied to the online form built a few lines before, please click on the link that appears below and keep reading.
Next: Using click interceptions for submitting and validating a web form via Ajax >>
More JavaScript Articles
More By Alejandro Gervasio
