Sending data from Combo box to server asynchronously
Sending data from Combo box to server asynchronously
In this article, we will learn to send the options selected in the Combo box to the server asynchronously i.e. through AJAX. Through AJAX, we don't have to select Submit button in the form to get response from the server instead, we get the response asynchronously (immediately) on selecting an option from the combo. For this article, we will make three files by namely: comboajax.php, comboajax.js and showcat.php :
comboajax.php - PHP script that will display a combo box
comboajax.js - JavaScript file that creates XMLHttpRequest object to send request to the server asynchronously
showcat.php - Server side PHP script to display the response
The coding of comboajax.php is as under :
comboajax.php
Above program displays a combo box of name "Category" with three items : Camera, Mobile and Book displayed in it. If any change takes place, that is if any option is selected from this combo box, a method itemdisplay() will be invoked and the selected option is passed to it as argument. Also anelement is defined with id : info for displaying the server response
The coding of comboajax.js is as under:
comboajax.js
function makeRequestObject(){
var xmlhttp=false;
try {
xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e) {
try {
xmlhttp = new
ActiveXObject('Microsoft.XMLHTTP');
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
function itemdisplay(cat)
{
var xmlhttp=makeRequestObject();
xmlhttp.open('GET', 'showcat.php?&Category;='+cat, true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status == 200) {
var content = xmlhttp.responseText;
if( content ){
document.getElementById('info')[removed] = content;
}
}
}
xmlhttp.send(null)
}
Above program makes an XMLHttpRequest object and places request to the server (by GET method) for the file showcat.php, sending the category of product selected by the user (from the combo box) to it. This category is retrieved in showcat.php file using $_GET array.
Since an asynchronous request is made to the server, the state of the request and the response to the request is checked. If the value of readyState property becomes 4 (meaning the request is complete) and the value of the status of the HTTP Request is 200 (which means there is no error), the response is then retrieved from the response stream and is assigned to variable : content which is then applied to the innerHTML property (property used to display results) of the element with id : "info" . It is the same
element with id : "info" we have defined in web page for displaying server response. Hence, the response retrieved from the server is displayed at the place of element : "info".
Note the response generated by the server is based on the execution of the file : showcat.php. Lets analyze what it returns
showcat.php
echo "Category selected is : " . $_GET['Category'] ;
?>
Above file returns the text : "Category selected is " and the category name selected by the user. The category selected by the user is passed while making the XMLHttpRequest for the file showcat.php in the following command :
xmlhttp.open('GET', 'showcat.php?&Category;='+cat, true);
The output of the program comboajax.php may appear as shown in below given figure.
Combo Box displaying various options
The moment, we select an item from the combo box, the message displaying the selected option appears on the screen as shown in below given figure.
The selected items is displayed on the screen
For more information, refer my book: "Developing Web Applications in PHP and AJAX" available at: http://www.amazon.com/Developing-Web-Applications-PHP-AJAX/dp/0070707103/ref=ntt_at_ep_dpt_4
For more articles, visit my blog, http://www.bmharwani.com/blog
Dynamics GP Data Migration from Your Legacy Accounting Application Dell LTO-4 Tape, a Big Hitter in Busy Data Centers Video Recovery from SD card Data Recovery – A Very Important Aspect KOL Databases for Pharmaceutical Industries How to Fix Corrupt Outlook Database PST Files? Debt Recovery Hard Drive Data recovery San Jose Organize Your Data – Use Registry Easy The Principals Of Visual Database Development How To Quest Dying Data On-line-demise Records Lookup Hard Drive Recovery When the Drive Fails due to Poor Ventilation Learn How To Collect And Analyze Data