Adding ajax loading gif to script - php

Question

Thanks for looking, I have the below script that updates a series of drop down boxes, populated depending on the users previous answer. Data comes from SQL tables. I was wondering how I could add an Ajax loading gif to each drop down while the data is loading. I hope this makes sense, if not please ask.
<script language="javascript">
var xmlhttp
function selectmanu()
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Your browser does not support XMLHTTP!");
return;
}
document.form1.mtype.style.background = "#FFFFFF"
var id=document.form1.mtype.value;
var url="selectmanu.php";
url=url+"?id="+id;
/*url=url+"&sid="+Math.random();*/
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("abc").innerHTML=xmlhttp.responseText;
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
function selectmodel()
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Your browser does not support XMLHTTP!");
return;
}
document.form1.manu.style.background = "#FFFFFF"
var id=document.form1.manu.value;
var url="selectmodel.php";
url=url+"?id="+id;
xmlhttp.onreadystatechange=stateChanged1;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function stateChanged1()
{
if (xmlhttp.readyState==4)
{
document.getElementById("modspan").innerHTML=xmlhttp.responseText;
}
}
function validate()
{
if(document.form1.mtype.value=='0')
{
document.form1.mtype.style.background = "#FF0000"
return false;
}
else if(document.form1.manu.value=='0')
{
document.form1.manu.style.background = "#FF0000"
return false;
}
else if(document.form1.model.value=='0')
{
document.form1.model.style.background = "#FF0000"
return false;
}
return true;
}
function mset()
{
if(document.form1.model.value!='0')
{
document.form1.model.style.background = "#FFFFFF"
}
}
</script>
Cheers,
B.

Answer 1

Instead of images, you could disable the "select" and put a single "option" with a loading message. You do that before the XHR call.
<select disabled="">
<option>Loading...</option>
</select>
Once you get your data, replace this "option" by the real ones, and remove the attribute "disabled".
Visually it is ok, and users do not have anything to guess.

Answer 2

I think you can have images in select options, but I'm too sure. Don't quote me on that.
Nevertheless, it should just be a case of having an onChange JavaScript function that replaces the next select element with a loading image whilst querying the database for your options. When the options have been retrieved by AJAX, replace the loading image with a select field, and loop through your AJAX response and add an option tag for each option you retrieved from the database.
As mentioned above, libraries like jQuery make writing functions like this easier, but for that you do need a good knowledge of writing JavaScript from scratch.