How to dynamically populate a DropDown using PHP & AJAX?

I had this requirement for one of my Entry Forms on my web page. There are few DropDown controls where in I wanted to fill the items dynamically and without refreshing the page. Below I illustrate how you can achieve this.

Example Scenario:

On my web page, I have a DropDown control in which I have to list certain categories. The DropDown must get filled when a user clicks on it.

For this, we first create an HTML table and add columns in it like this:

<td>Category:</td>
<td>
<div name="categoryDiv" id="categoryDiv">
<select id="inCategory" name="inCategory" onclick="MakeRequest('categoryDiv');">
<option>Select Category</option>
</select>
</div>
</td>

Above, we are calling a MakeRequest AJAX function and passing the Div section name. This is because in future, this code can be modified to work as a reusable function. Below is the AJAX code:

function getXMLHttp()
{
 var xmlHttp

 try
 {
 //Firefox, Opera 8.0+, Safari
 xmlHttp = new XMLHttpRequest();
 }
 catch(e)
 {
 //Internet Explorer
 try
 {
 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
 }
 catch(e)
 {
 try
 {
 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 }
 catch(e)
 {
 alert("Your browser does not support AJAX!")
 return false;
 }
 }
 }
 return xmlHttp;
}

function MakeRequest(DivName)
{
 var xmlHttp = getXMLHttp();
 var strUrl = "filldropdown.php?DivName = " + DivName;
 
 try 
 {
 xmlHttp.onreadystatechange = function()
 {
 if (xmlHttp.readyState == 4) 
 {
 HandleResponse(xmlHttp.responseText, DivName);
 }
 }
 xmlHttp.open("GET", strUrl, true);
 xmlHttp.send(null);
 }
 catch(err)
 {
 alert(err);
 }
}

function HandleResponse(response, DivName)
{
 try 
 {
 document.getElementById(DivName).innerHTML = response;
 }
 catch(err)
 {
 alert(err);
 }
}

It is recommended that you create a separate .js file where you can paste this code as it is. Suppose, you saved this file with the name: ajaxhandler.js. Therefore, you must include a reference to this file in the above given HTML code as:

<script type="text/javascript" src="ajaxhandler.js"></script>

Please note that you must include the above code line within the head tag in your HTML file.

Now that you have written the AJAX code, it is the time of writing the final code using PHP. You can see above that the MakeRequest function calls a file "filldropdown.php". Below is the code of the file "filldropdown.php"

<?php

$conn = mysql_connect(DB_HOST,DB_USER,DB_PASSWORD);

mysql_select_db('myDatabase'); 

$query = "SELECT categoryid, categoryname FROM categories";
$result = mysql_query($query);
?>

<select name="inCategory">
<option>Select Category</option>
<?php while($row=mysql_fetch_array($result))
{ ?>
    <option value="<?= $row['categoryid'] ?>"><?= $row['categoryname'] ?></option>
<?php } ?>
</select>

Summary:
So here three types of code is playing the role to populate the DropDown dynamically:

1. HTML code comprising of Div and table columns.
2. AJAX code residing in the file, say, "ajaxhandler.js", and
3. PHP code residing in the file, say, "filldropdown.php". This code contains SQL query to fetch rows from a MySQL table to populate your DropDown control.