Dependent Select Box using Ajax
Tuesday, November 13th, 2007One of the members on Irish WebMaster Forums asked for help in creating a simple dependent select menu and the most obvious option is by using Ajax, so I decided to put up this post with step-by-step instructions.
First, create a new PHP page (as we are going to use php for this) and name it “page1.php“.
On this page we are going to add the following javascript code, which will take care of our XMLHTTP request.
<script type="text/javascript" language="javascript">
var ewd_domain = 'http://www.eire-webdesign.ie/'; //set domain
var ewd_loading_img = ewd_domain + 'images/loading.gif';//set image path
var ewd_loading_msg = 'Loading Data…';//set loading message
var xmlhttp_obj = false;
//create the XMLHttpRequest
function ewd_xmlhttp(){
if (window.XMLHttpRequest){ // if Mozilla, Safari etc
xmlhttp_obj = new XMLHttpRequest();
}else if (window.ActiveXObject){ // if IE
try{
xmlhttp_obj = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
xmlhttp_obj = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
}
}
}else{
xmlhttp_obj = false;
}
return xmlhttp_obj;
} //get content via GET
function ewd_getcontent(url, containerid){
var xmlhttp_obj = ewd_xmlhttp();
document.getElementById(containerid).innerHTML = '<img src="' + ewd_loading_img + '" />' + ewd_loading_msg;
xmlhttp_obj.onreadystatechange=function(){
ewd_loadpage(xmlhttp_obj, containerid);
}
xmlhttp_obj.open('GET', url, true);
xmlhttp_obj.send(null);
}
function ewd_loadpage(xmlhttp_obj, containerid){
if ( xmlhttp_obj.readyState == 4 && xmlhttp_obj.status == 200 ){
document.getElementById(containerid).innerHTML = xmlhttp_obj.responseText;
}
}
Now will create a simple form with two select menus and a submit button:
<form name="select_m" id="select_m" action="<?php echo $_SERVER['REQUEST_URI']."?".$_SERVER['QUERY_STRING'];?>" method="get">
<select name="sel1" id="sel1" onchange="ewd_getcontent('page2.php?sel1='+this.value, 'span1');">
<option value="">select...</option>
<option value="1">first</option> <option value="2">second</option>
<option value="3">third</option>
</select>
<span id="span1">
<?php
include_once("_page2.php");
//this is the page that will create the second select menu
?>
</span>
<input type="submit" name="submit" id="submit" value="Go..." />
</form>
Now save page1.php and create a new page “page2.php“, where we are going to create the second select menu which will change its options based on the GET request:
<?php
$txt = "";
$qs = $_GET['sel1'] != "" ? preg_replace("#[^0-9]#","",$_GET['sel1']) : "1";//I use preg_replace to sanitze the get request
//which in this case must be numbers
//this is manually created but it can be easily populated from a database
if($qs != ""){
if($qs == "1"){
$txt .= "<select name='sel2' id='sel2' style='font-size:11px;'>
<option value=''>select...</option>
<option value='11'>first-first</option>
<option value='12'>first-second</option>
<option value='13'>first-third</option>
</select>";
}elseif($qs == "2"){
$txt .= "<select name='sel2' id='sel2' style='font-size:11px;'>
<option value=''>select...</option>
<option value='21'>second-first</option>
<option value='22'>second-second</option>
<option value='23'>second-third</option>
</select>";
}elseif($qs == "3"){
$txt .= "<select name='sel' id='sel2' style='font-size:11px;'>
<option value=''>select...</option>
<option value='31'>third-first</option>
<option value='32'>third-second</option>
<option value='33'>third-third</option>
</select>";
}
echo $txt;
}
?>
Save the second page, and using your preferred browser navigate to “page1.php”, make a selection and see how the second menu will change its values.
How it works? Simple.
We have the javascript code that will take care of our XMLHttpRequest.
As you have noticed we have added a span id html element that will hold our second select menu, which is passed to the Ajax code to replace its content with the html received from the “page2.php” using the innerHTML function:
............
document.getElementById(containerid).innerHTML = xmlhttp_obj.responseText;
............
We’ve added “onchange” function to the first select menu that will execute our javascript function, passing its value to the the second select menu for filtering the data, and also the span id to tell the function where the magic has to be executed.
Just in case javascript is disabled in the user browser, we’ve added a submit button as well so the form is still functional.
Few minutes of work and voila you’ve done it.
It wasn’t that hard was it?
You can see an working example here: Dependent select menus
