HTTP FORM POST in PHP using AJAX
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:
- When the page loads i am creating an AJAX Object by calling the getXMLObject() function and returning the object created in the xmlhttp variable
- When the user clicks on the input Button, ajaxFunction() gets called which checks for whether the Ajax Object is created or not and depending on that calls the remote script. Here a function handler handleServerResponse is also defined for retrieving the value from the server
- When the readystate of the AJAX call reaches 4 and the http status is 200 we pass the data fetched from the server to the textbox
Explanation for the PHP Code
- I am calling $_POST for fetching the post content send through Ajax Call
- Finally i am calling echo to send the response back to the calling page
Custom Search
Popular Articles:
- Ajax Programming with JSP and Servlets
- OOPS in PHP5 – Declaring Class and Initializing Class Object
- PHP5 Tutorial – __isset() Magic Method
- Generate Unique SessionId in PHP
- PHP5 Tutorial – __sleep() Magic Method
- How AJAX Works
- MySql Batch Insert Using PHP
- OOPS in PHP5 – Define Attributes for Class
- PHP5 Tutorial – __call() Magic Method
- OOPS in PHP 5 Tutorial – Abstract Class



































Good site I “Stumbledupon” it today and gave it a stumble for you.. looking forward to seeing what else you have..later
You have done a good job
Nice post, Thanks.
Excellent tutorials pal….i was searching this for a long time, and finally found one!!
Thanks
Thank you so much. It works perfect!
hi where is it
What about if we use more than one input??
Hi,
Yes you can do AJAX call with more than one input.
Say if you have two textbox(textbox1 and textbox2) in your HTML code that needs to be passed through AJAX than, send method will have following data:
xmlhttp.send(“txtname=” + textbox1.value + “&txtname1=” + textbox2.value);
Thanks,
Hitesh Agarwal
1000000 times thank you … http://www.ghyoom.com/
nice one
Thnk u very much budy……………….
sweet and clean example… good job!
What about if we use more than one form?
In that case you will have to capture data of forms using javascript and send that data to individual ajax call method.
Excellent tutorial. Just wanted to say thanks for taking the time to write it!
Great post, but I am having trouble getting it working with an image submit button. Works fine for me with regular submit, but as soon as I go to image submit, it puts all the form items in the URL and craps out. Thoughts?