Custom Search

FORM POST in PHP using AJAX

Posted by Hitesh Agrawal
February 28, 2008

This example demonstrates HTTP FORM POST complete HTML form to the server and displaying the response using AJAX.

HTML Page

<html>
<head>
<title>PHP using AJAX</title>
<script type="text/javascript">
 
var time_variable;
 
function getXMLObject()  //XML OBJECT
{
   var xmlHttp = false;
   try {
     xmlHttp = new ActiveXObject("Msxml2.XMLHTTP")  // For Old Microsoft Browsers
   }
   catch (e) {
     try {
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")  // For Microsoft IE 6.0+
     }
     catch (e2) {
       xmlHttp = false   // No Browser accepts the XMLHTTP Object then false
     }
   }
   if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
     xmlHttp = new XMLHttpRequest();        //For Mozilla, Opera Browsers
   }
   return xmlHttp;  // Mandatory Statement returning the ajax object created
}
 
var xmlhttp = new getXMLObject();	//xmlhttp holds the ajax object
 
function ajaxFunction() {
  var getdate = new Date();  //Used to prevent caching during ajax call
  if(xmlhttp) { 
  	var txtname = document.getElementById("txtname");
    xmlhttp.open("POST","testing.php",true); //calling testing.php using POST method
    xmlhttp.onreadystatechange  = handleServerResponse;
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlhttp.send("txtname=" + txtname.value); //Posting txtname to PHP File
  }
}
 
function handleServerResponse() {
   if (xmlhttp.readyState == 4) {
     if(xmlhttp.status == 200) {
       document.getElementById("message").innerHTML=xmlhttp.responseText; //Update the HTML Form element 
     }
     else {
        alert("Error during AJAX call. Please try again");
     }
   }
}
</script>
<body>
<form name="myForm">
<table>
 <tr>
  <td>Enter Name</td>
  <td><input type="text" name="txtname" id="txtname" /></td>
 </tr>
 <tr>
  <td colspan="2"><input type="button" value="Submit" onclick="ajaxFunction();" /></td>
 </tr> 
</table>
<div id="message" name="message"></div> 
</form>
</body>
</head>
</html>





PHP Code

< ?
 
$a = $_POST['txtname'];
 
echo "Good Morning".$a;
 
 
?>

Explanation for the AJAX Code

Here i have declared 3 JavaScript function:
getXMLObject() - Responsible for creating the AJAX Object depending on the browser
ajaxFunction() - Responsible for calling PHP page through AJAX call
handleServerResponse() - Responsible for displaying the data retrieved from the server




How the AJAX Code Works:

Explanation for the PHP Code

Related Post

AJAX, PHP

Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically to your feed reader.

Comments

Good site I “Stumbledupon” it today and gave it a stumble for you.. looking forward to seeing what else you have..later

Comment by Jerry Galino on April 5, 2008 @ 6:07 am
Leave a comment

(required)

(required)