Getting matching data from server by sending customer id using Ajax and PHP

We can enter the customer id or any student number in one input field and get back the full details of the customer. User enters a number as customer id and the JavaScript function getInfo() gets trigger by onBlur event handler of the textbox. We have used onBlur but any other event handler can be used, a button can be used with onClick event handler.

You can understand this requirement can be easily done by using one web form and submitting the data to a server side script. But by using Ajax we need not submit the form and load a new page. The same page can collect the information at the background using XMLHttpRequest and get the data for us. This is a better way of doing the same thing with improved user experience.

Here is the demo. Please use customer id 1, 2 or 3 to get the name of the customer for any other id you will get message saying No customer name available.

Demo of Record details by PHP Ajax

For basic understanding of XMLHttpRequest for Ajax please read this.

Usually the data is taken from a customer table but for simplicity we have kept an array here with three customer details. This server side part can be extended to connect a database and details of customer can be collected. This part of the code we kept in a PHP script ( code.php file ) and you can easily modify this small script. The small PHP code is here.


$customer_id=$_POST['customer_id'];
$var=array(003=>"Jim",005=>"Ron",007=>"Kim");

// Array from which the customer name is to be taken

if(array_key_exists($customer_id,$var))
{ echo "Name of the customer: $var[$customer_id]";}
else {echo " No customer name available";}

As you can see in the above code, the script collects the customer_id and then if the id is present inside the (PHP) array then the name of the corresponding customer is returned, otherwise a message saying customer name not there is returned to calling html page. We used array_key_exists() to search for the customer id.

Let us try to understand the JavaScript and Ajax part.

We have created one XMLHttpRequest variable inside JavaScript code and given the name ajrequest. The function getInfo() is triggered once the user enters a customer id and press tab or goes out of the field. This function getInfo() uses another function getFormData and collects all the values entered by user inside the form. It submits all the data by POST method to the page assigned by variable url ( code.php page ). Now it is the time to collect response.

Inside the function stateChanged() we can collect the response we get from the server side php script and assign that received data to one div tag identified by txtHint. The data is displayed as it is received from the server, note that there is no need of page reload.

Here is the total code of html page. You can download the full code of both the files at the end of this page.


<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title>(Type a title for your page here)</title>
<script language="javascript" type="text/javascript">
var ajrequest= null;

   try {
     ajrequest= new XMLHttpRequest();
   } catch (trymicrosoft) {
     try {
       ajrequest= new ActiveXObject("Msxml2.XMLHTTP");
     } catch (othermicrosoft) {
       try {
         ajrequest= new ActiveXObject("Microsoft.XMLHTTP");
       } catch (failed) {
         ajrequest= null;
       }
     }
   }

   if (ajrequest== null)
     alert("Error creating request object!");

///////////////////////////////
function stateChanged() 
    {

    if(ajrequest.readyState==4)
      {
document.getElementById("txtHint").innerHTML=ajrequest.responseText;
      }
    }
/////////////////////////////////
function getFormData(myForm) { 
var myParameters = new Array(); 
for (var i=0 ; i < myForm.elements.length; i++) { 
var sParam = encodeURIComponent(myForm.elements[i].name); 
sParam += "="; 
sParam += encodeURIComponent(myForm.elements[i].value); 
myParameters.push(sParam); 
} 

return myParameters.join("&"); 

} 
////////////////////////////////////////////

function getInfo(){
var url="code.php";
var myForm = document.forms[0]; 
var parameters=getFormData(myForm);
ajrequest= new XMLHttpRequest();
//var ajrequest= newrequest();

ajrequest.onreadystatechange=stateChanged;
ajrequest.open("POST", url, true);
ajrequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajrequest.send(parameters)  ;

}

////////////////////////////////
</script>
</head>

<body>

<form name="myForm" >
Customer ID: <input type=text size=3 name=customer_id onBlur=getInfo();><br>
<input type=submit value=Submit>
</form>
<div id="txtHint"><b>Customer info will be listed here.</b></div>

</body>
</html>

Download the zip file ( both code.htm & code.php )

Subscribe to our YouTube Channel here

Ajax & PHP to get corresponding details of customer

Subscribe