Hi everyone,
I am really new to AJAX and not all that up with javaScrip so go easy one me 🙂
Ok i have a drop down list that that when a country is selected (i only have two in there atm just for testing) another drop down list with places in that country appears.
I have sort of modded examples i have found on the internet to get it to do what i want.
Now what i want to do is add a loading image while the AJAx is loading before the second drop down list is loaded. My code is below, if any one could help me out with putting the image in that would be great.
atm ive had ago but it dosnt seem to work. Like i said i am really new to this so im sure i dont have much of a clue lol
thanks for looking 🙂
HTML form
<html>
<head>
<script type="text/javascript" src="selectCountry.js"></script>
</head>
<body>
<form>
Select country:
<select name="users" onchange="showCountry(this.value)">
<option value="">Select one</option>
<option value="1">US</option>
<option value="2">UK</option>
</select>
</form>
<p id="here"></p>
</body>
</html>
JAVASCRIPT
var xmlhttp;
function showCountry(str)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Your browser does not support HTTP Request!");
return;
}
var url="getCountry.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function stateChanged()
{
[B]if (xmlhttp.readyState==1)
{
$("here").empty().html('<img src="loading.gif" />');
}[/B]
else if (xmlhttp.readyState==4)
{
document.getElementById("here").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;
}
PHP
<?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'root', '');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("ajax_demo", $con);
if ($q == 1)
{
$sql= mysql_query("SELECT * FROM states");
echo "<select>";
while($row = mysql_fetch_array($sql))
{
echo "<option value ='1'>".$row['state']."</option>";
}
echo "</select>";
}
else
{
$sql= mysql_query("SELECT * FROM ukTowns");
echo "<select>";
while($row = mysql_fetch_array($sql))
{
echo "<option value ='1'>".$row['town']."</option>";
}
echo "</select>";
}
mysql_close($con);
?>
