I have a ajax script below which should get the info from the database with the option selected however when i select a name another select menu appears with the same details in.
<script language="JavaScript" type="text/javascript">
function display_data(id) {
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null) {
alert ("Your browser does not support AJAX!");
return;
}
var url="aja.php";
url=url+"?id="+id;
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 || xmlhttp.readyState=="complete") {
document.getElementById('employ_data').innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function GetXmlHttpObject() {
var xmlhttp=null;
try {
// Firefox, Opera 8.0+, Safari
xmlhttp=new XMLHttpRequest();
}
catch (e) {
// Internet Explorer
try {
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlhttp;
}
</script>
and the rest of the code
<select onchange="display_data(this.value);">
<option>Select pet</option> <?php
$rows = $db->query("SELECT * FROM `".TABLE_ANIMALS."`");
while(list($id, $name)=$db->fetch_array($rows)){
echo "<option value=\"".$id."\">".$name."</option>";
}
?>
</select>
<div id="employ_data"><?php
if (isset($_GET['id'])) {
$rows = $db->query("SELECT * FROM `".TABLE_ANIMALS."` where id='$_GET[id]'");
$row = $db->fetch_array($rows);
echo "<table border=\"1\">
<tr>
<td>Name:</td>
<td>".$row['name']."</td>
</tr>
<tr>
<td>Appoint Date:</td>
<td>".$row['age']."</td>
</tr>
<tr>
<td>Country:</td>
<td>".$row['colour']."</td>
</tr>
<tr>
<td>City:</td>
<td>".$row['breed']."</td>
</tr>
</table>";
}?> <div>
Any help would br great.