Using Click Interceptions with JavaScript

Since my intention here is to demonstrate how click interceptions can be used to submit and eventually validate a simple contact form with Ajax, I'm going to define a JavaScript function that permits the sending of an HTTP request by using a regular XML HTTP Request object.

Here is the complete signature of this brand new function, which can fetch files in the web server with Ajax:

// send http requests

function sendHttpRequest(url,callbackFunc,respXml){

var xmlobj=null;

 try{

xmlobj=new XMLHttpRequest();

}

catch(e){

try{

xmlobj=new ActiveXObject("Microsoft.XMLHTTP");

}

catch(e){

alert('AJAX is not supported by your browser!');

return false;

}

}

xmlobj.onreadystatechange=function(){

if(xmlobj.readyState==4){

if(xmlobj.status==200){

respXml?eval(callbackFunc+'(xmlobj.responseXML)'):eval(callbackFunc+'(xmlobj.responseText)');

}

}

}

// open socket connection

xmlobj.open('GET',url,true);

// send http header

xmlobj.setRequestHeader('Content-Type','text/html; charset=UTF-8');

// send http request

xmlobj.send(null);

}

As you can see, the previous "sendHttpRequest()" JavaScript function implements all the logic required to send HTTP requests via Ajax. Additionally, it will send the corresponding web server responses to another callback function, in this case called "displayErrorMessage()," which not surprisingly will be tasked with displaying, in the browser, all of the errors that might occur when validating the sample web form that I coded in the prior section.

The definition of the "displayErrorMessage()" callback function mentioned before is as follows:

// display error messages

function displayErrorMessage(errorMessage){

var errorcont=document.getElementById('errorcontainer');

if(!errorcont){return};

errorcont.innerHTML=errorMessage;

}

Indeed, the logic implemented by the above JavaScript function is pretty easy to follow. All it does is fill in the previously defined "errorcontainer" DIV with the different error messages generated after validating the pertinent online contact form.

So far, so good, right? At this point, you've surely grasped how the two previous JavaScript functions handle the submitting and validating of a simple contact form with Ajax. However, there's an important piece of this schema that still remains undone.

Yes, you guessed right! In this case, it's necessary to implement the programming logic required to intercept all the mouse clicks that will occur when the contact form is submitted by an user, and handle this operation with Ajax, in this way stopping the form's default behavior.

The function listed below, called "initializeForm()," is the one responsible for performing the aforementioned click interception process. Here it is:

// initialize web form

function initializeForm(){

var formbtn=document.getElementsByTagName('form')[0].elements[3];

if(!formbtn){return};

// use click interception to submit the form

formbtn.onclick=function(){

var theform=document.getElementsByTagName('form')[0];

sendHttpRequest('processform.php?fname='+theform.elements[0].value+'&lname='+theform.elements[1].value+'&email='+theform.elements[2].value,'displayErrorMessage');

return false;

}

}

As shown by the above function, each time the previous contact form is submitted by a user, it will be intercepted in the middle of this process, and the pertinent form data will be sent to the web server via Ajax. Finally, the "return false" statement at the end of the function prevents the form from being sent in the regular fashion.

All right, at this point I'm sure you have a much clearer idea of how to use a simple JavaScript click interception to submit a sample web form with Ajax. Considering that you've already learned the basics of implementing this handy approach, in the next section I'll be listing the complete source code of the previous hands-on example, and include the small PHP file that actually validates the online contact form.

Jump ahead and read the next few lines. I'll be there, waiting for you.