JAVASCRIPT

Using Click Interceptions with JavaScript

Web pages with AJAX tricks load extra content when certain parts of the page are clicked without reloading the entire page. This improves the visitor's experience. Wouldn't you like to get that functionality for your web site? This four-part series shows you how to do it with a technique called "click interception."

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 2

November 05, 2008

TABLE OF CONTENTS:

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">

<head>

<title>Submitting a web form using AJAX and click interception</title>

body{

padding: 0;

margin: 0;

background: #fff;

}

h1{

font: bold 18pt Arial, Helvetica, sans-serif;

color: #000;

}

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>

<p>First Name <input name="fname" type="text" title="Enter your First Name" /></p>

<p>Email <input name="email" type="text" title="Enter your email address" /></p>

</form>

</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 >>