In this example we create two files
(1) is index.php, which is client side file.
(2) is ajax_results.php, which is server side file.
You can download code from this url
In index.php file
<html> <head> <script> function Ajaxfun(){ var ajaxRequest; // The variable that makes Ajax possible! try{ // Opera 8.0+, Firefox, Safari ajaxRequest = new XMLHttpRequest(); }catch (e){ // Internet Explorer Browsers try{ ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); }catch (e) { try{ ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); }catch (e){ // Something went wrong alert("Your browser broke!"); return false; } } } // Now get the value from user name, user sex and pass it to // server script. var uname = document.getElementById('uname').value; var usex = document.getElementById('usex').value; var queryString = "?uname=" + uname ; queryString += "&usex=" + usex; ajaxRequest.open("GET", "ajax-results.php" + queryString, true); ajaxRequest.send(null); // Create a function that will receive data // sent from the server and will show data on the ajax div. ajaxRequest.onreadystatechange = function(){ if(ajaxRequest.readyState == 4){ var ajaxDisplay = document.getElementById(‘ajaxDiv’); ajaxDisplay.innerHTML = ajaxRequest.responseText; } } }</script> </head> <body> <form> <div> <div style="float: left;width:30%"> Your Name </div> <div style="float: left;width:70%"> <input type="text" id="uname" /> </div> </div> <div> <div style="float: left;width:30%"> Your Sex </div> <div style="float: left;width:70%"> <select name="usex" id="usex"> <option value="">Select</option> <option value="male">Male</option> <option value="female">Female</option> </select> </div> </div> <div style="clear: both"></div> <div align="center" onClick="Ajaxfun()"> <span style="background-color:#3a5795; color:#fff; cursor: pointer;">Get</span> </div> <div style="clear: both"></div> <div id="ajaxDiv"></div> </form> </body> </html>
In ajax_request.php
<?php $uname=$_REQUEST['uname']; $usex=$_REQUEST['usex']; $errmsg=""; $err_count=0; if($uname=='') { $errmsg .="Please write the name"; $err_count++; } if($usex =='') { $errmsg .="Please select the sex"; $err_count++; } if($err_count==0) { echo "Hi, your name is $uname and sex is $usex"; }else{ echo $errmsg; } ?>
Output is:-