This article briefly explains how to submit HTML form using AJAX. This article is intended for Ajax beginners. The word AJAX is the short form of asynchronous JavaScript and XML. Ajax is widely used in modern websites, web applications, etc. In this article, we assume the basic knowledge of javaScript and HTML.
Step1
Create the HTML form and validate the form with help of javaScript. If you do not know how to create HTML form, you may click here to learn it. We assume the basic knowledge of HTML and JavaScript in this tutorial.
In this tutorial, we have form with five fields to be submitted to a server-side page without using the normal action attribute. Create a form with name “myContactForm“. Then insert the text and textarea inputs in it. the following code would do it. You can download the full code at the end of this article.
<form id="myContactForm" name="myContactForm" method="post" > <table width="500" border="0" align="center" cellpadding="0" cellspacing="0"> ..... <tr> <td width="208"><label for="firstName">Firstname</label> </td> <td width="292"><input name="firstName" type="text" id="firstName" /></td> </tr> ...... <tr> <td width="208"><label for="email">Email</label> </td> <td width="292"><input name="email" type="text" id="email" /></td> </tr> ........... <tr> <td> </td> <td> <a href="#" onclick="submitFormWithAjax();">Yes I'm Done!</a></td> </tr> ......... </table> </form>
Step2:
Once we have created the form, you may validate each input fields as required. This step is optional in this tutorial.
Step3:
You might have noticed we have invoked a function (onclick=”submitFormWithAjax();”) in the “Yes I’m Done!” link. This script will submit the form using ajax. In the form page, place the below script inside the <head> tag.
<script type="text/javascript">
// function create GetXmlHttpObject
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
The above function will create GetXmlHttpObject required for making an Ajax Request.
Now, we need to define the function which is triggered on click of the text link (Yes I’m Done!). Following is the code:
function submitFormWithAjax(){
var myAjaxPostrequest=new GetXmlHttpObject();
var t2lFname=document.myContactForm.firstName.value;
var t2lLname=document.myContactForm.lastName.value;
var t2lEmail=document.myContactForm.email.value;
var t2lTel=document.myContactForm.telNo.value;
var t2lComments=document.myContactForm.comments.value;
var parameters="firstname="+t2lFname+"&lastname="+t2lLname+"&email="+t2lEmail+"&tel="+t2lTel+"&comments="+t2lComments;
myAjaxPostrequest.open("POST", "thank-you.php", true);
myAjaxPostrequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
myAjaxPostrequest.send(parameters);
myAjaxPostrequest.onreadystatechange=function(){
if(myAjaxPostrequest.readyState==4){
if(myAjaxPostrequest.status==200){
document.getElementById("result").innerHTML=myAjaxPostrequest.responseText;
document.getElementById("myContactForm").style.display = "none";
}
else {
document.getElementById("myContactForm").innerHTML="An error has occured making the request";
}
}
}
}
</script>
This looks like a bit long, but very simple to understand! Let us understand it step by step.
The code, var myAjaxPostrequest=new GetXmlHttpObject(); creates an XMLHttpRequest object. The next five lines are storing the field values in the form into variables and in the “var parameters=”firstname=”+t2lFname+”&lastname=”+t2lLname+”&email=”+t2lEmail+”&tel=”+t2lTel+”&comments=”+t2lComments;” line, all the values are stored in a single variable called “parameters“. This parameters will be later used to post the data to a thank you page.
Now, in the following three lines, the XMLHttpRequest object uses open() and send() method to send a request to the server. We also set the setRequestHeader parameters as well. Now that the request is send to the server.
The code which begins with “myAjaxPostrequest.onreadystatechange=function()…” tells what to do once the form is submitted.
Our final Script code should look like the following:
<script type="text/javascript">
// function create GetXmlHttpObject
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
function submitFormWithAjax(){
var myAjaxPostrequest=new GetXmlHttpObject();
var t2lFname=document.myContactForm.firstName.value;
var t2lLname=document.myContactForm.lastName.value;
var t2lEmail=document.myContactForm.email.value;
var t2lTel=document.myContactForm.telNo.value;
var t2lComments=document.myContactForm.comments.value;
var parameters="firstname="+t2lFname+"&lastname="+t2lLname+"&email="+t2lEmail+"&tel="+t2lTel+"&comments="+t2lComments;
myAjaxPostrequest.open("POST", "thank-you.php", true);
myAjaxPostrequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
myAjaxPostrequest.send(parameters);
myAjaxPostrequest.onreadystatechange=function(){
if(myAjaxPostrequest.readyState==4){
if(myAjaxPostrequest.status==200){
document.getElementById("result").innerHTML=myAjaxPostrequest.responseText;
document.getElementById("myContactForm").style.display = "none";
}
else {
document.getElementById("myContactForm").innerHTML="An error has occured making the request";
}
}
}
}
</script>
Step4:
Now create a thank you page with the name “” and insert the following code into it.
<?php
// Process the submitted data
echo "<div style='text-align:center;'><h2>Thank you for Contacting Us!</h2></div> ";
$t2lpostData = $_POST;
echo "<div style='text-align:center;'><em>You have Submitted the following Information</em> <br />";
foreach ($t2lpostData as $k => $v) {
echo $k = $v." <br />";
}
echo "</div>";
?>
Now the form and the thank you page is ready. upload these files into a php supported webserver root and check. Click here to download the files.