Here all the JavaScript code is kept inside a function ajaxFunction(myForm). The first part of this function is part of the standard code we use in different scripts. You can get more on this standard ajax part here.
Collecting the form data
Form data is collected and handled inside the function. One array myParameters is created and all data are arranged inside it. Then it is posted by using POST method.
To display messages we have used one div tag display-msg , you can learn more on how to display messages inside Ajax script here.
Here all the JavaScript code is kept inside a function ajaxFunction(myForm). The first part of this function is part of the standard code we use in different scripts. You can get more on this standard ajax part here.
The full code is here
function ajaxFunction(myForm)
{
var httpxml;
try
{
// Firefox, Opera 8.0+, Safari
httpxml=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
httpxml=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
httpxml=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
function stateChanged()
{
if(httpxml.readyState==4)
{
var myObject = eval('(' + httpxml.responseText + ')');
var statusck=myObject.value[0].status;
if(statusck=="OK"){
document.getElementById("myForm").reset();
window.location="https://www.google.com";
}
document.getElementById("display-msg").style.borderColor='#00FF00 #0000FF';
document.getElementById("display-msg").innerHTML=myObject.value[0].msg;
document.getElementById("display-msg").style.display='inline';
}
}
function getFormData() {
var myParameters = new Array();
var str1=document.getElementById("feedback").value;
str1 = "feedback="+encodeURIComponent(str1);
myParameters.push(str1);
//alert(str1);
/////
var str1=document.getElementById("n1").value;
str1 = "n1="+encodeURIComponent(str1);
myParameters.push(str1);
//alert(str1);
/////
var str1=document.getElementById("n2").value;
str1 = "n2="+encodeURIComponent(str1);
myParameters.push(str1);
/////
var str1=document.getElementById("email").value;
str1 = "email="+encodeURIComponent(str1);
myParameters.push(str1);
/////
var str1=document.getElementById("phone").value;
str1 = "phone="+encodeURIComponent(str1);
myParameters.push(str1);
/////
var str1=document.getElementById("add1").value;
str1 = "add1="+encodeURIComponent(str1);
myParameters.push(str1);
/////
var str1=document.getElementById("add2").value;
str1 = "add2="+encodeURIComponent(str1);
myParameters.push(str1);
/////
var str1=document.getElementById("city").value;
str1 = "city="+encodeURIComponent(str1);
myParameters.push(str1);
/////
var str1=document.getElementById("state").value;
str1 = "state="+encodeURIComponent(str1);
myParameters.push(str1);
/////
var str1=document.getElementById("country").value;
str1 = "country="+encodeURIComponent(str1);
myParameters.push(str1);
/////
var str1=document.getElementById("zip").value;
str1 = "zip="+encodeURIComponent(str1);
myParameters.push(str1);
/////
var str1=document.getElementById("sum").value;
str1 = "sum="+encodeURIComponent(str1);
myParameters.push(str1);
/////
var str1=document.getElementById("dtl").value;
str1 = "dtl="+encodeURIComponent(str1);
myParameters.push(str1);
/////
return myParameters.join("&");
}
var url="contactusck-ajax.php"; // URL of the form processing page
var parameters=getFormData();
httpxml.onreadystatechange=stateChanged;
httpxml.open("POST", url, true)
httpxml.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
httpxml.send(parameters)
document.getElementById("display-msg").style.background='#ffffcc';
document.getElementById("display-msg").innerHTML="Data Processing ....";
document.getElementById("display-msg").style.display='inline';
}
function hidemsg(){
document.getElementById("display-msg").style.display='none';
}