Using Click Interceptions with JavaScript - Full source code for the click interceptions demonstration
(Page 4 of 4 )
As I stated in the previous section, below I included the complete definition of the two source files that comprise this basic example of using click interceptions with JavaScript. As you know, in this specific case, this client-side approach is utilized to submit a basic web form with Ajax, but naturally, it can be applied within the context of other web applications as well.
Having said that, here's how the mentioned source files look:
(definition of 'sample_form.htm' file)
<!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>
<script language="javascript">
// 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);
}
// call 'initializeForm()' function when page is loaded
window.onload=function(){
// check if browser is DOM compatible
if(document.createElement&&document.getElementById&&document.
getElementsByTagName){
initializeForm();
}
}
</script>
<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>
(definition of 'processform.php' file)
<?php
$fname=trim($_GET['fname']);
$lname=trim($_GET['lname']);
$email=trim($_GET['email']);
$errorMsg='';
if(!$fname){
$errorMsg.='<p>Enter your first name.</p>';
}
if(!$lname){
$errorMsg.='<p>Enter your last name.</p>';
}
if(!$email){
$errorMsg.='<p>Enter your email address.</p>';
}
echo $errorMsg;
?>
Definitely, the pair of source files listed above are a good example of developing a click interception mechanism with JavaScript for submitting a simple web form via AJAX. In addition, you must realize that even when scripting is disabled on the browser for whatever reasons, the web form will still work correctly. This implies that the JavaScript application is also capable of offering a graceful degradation in this situation. What else can you ask for?
Final thoughts
In this initial chapter of the series, I explained the basic concepts that surround the implementation of click interceptions with JavaScript, and included an example to illustrate my points. As you saw earlier, this approach can be quite useful when it comes to extending the existing behavior of different web applications in an unobtrusive way.
In the upcoming part of the series, I'm going to show you how to use click interceptions to build an expansible image gallery. Now that you've been warned, you don't have any excuses to miss it!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
