Hello,
I am building a search filter, but I don't have much experience using AJAX. What I want to do is select a subject from an initial list then return a list of tutors which I have already done. Then I would like to return a list of centres, year, and lesson type but I'm having trouble expanding both the AJAX and PHP code to support multiple queries.
I want the first box to show initially, but the subsequent boxes not to show until the user selects options from the drop-down menus. Any ideas?
Julian
I have tried copying the showTutors() function and renaming it to showCentre() and so on, but I keep getting an error that an undefined index does not exist.
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="zh-HK" />
<title>Timetable</title>
<script type="text/javascript">
function showTutors(string) {
if (string=="") {
document.getElementById("tutors").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("tutors").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","query.php?tutor_name="+string,true);
xmlhttp.send();
}
</script>
<style>
#select {
border: solid #000000 1px;
border-collapse: collapse;
margin: auto;
width: 1000px;
}
#select tr td {
border: solid #000000 1px;
}
</style>
<body>
<table id="select">
<form>
<tr>
<td>
<select onchange="showTutors(this.value)">
<option value="">Subject:</option>
<option value="1">English</option>
<option value="2">Chinese</option>
<option value="3">Mathematics</option>
<option value="4">Business</option>
<option value="5">Science</option>
<option value="6">ICT/Liberal Studies</option>
<option value="7">Force</option>
<option value="8">LCCI</option>
<option value="9">IELTS</option>
</select>
</td>
<td><div id="tutors"></div></td>
</tr>
</form>
</table>
</body>
</html>query.php
<?php
// error_reporting(E_ALL ^ E_NOTICE);
$query=$_GET["tutor_name"];
$conn = mysql_connect('localhost', 'root', 'p4ssw0rd');
mysql_select_db("query", $conn);
$sql="SELECT Tutor_Name, Subject_ID FROM tutors WHERE Subject_ID = '".$query."' ORDER BY Tutor_Name ASC";
$result = mysql_query($sql);
echo "<select onchange=\"showCentre(this.value)\">";
while($row = mysql_fetch_array($result)) {
echo("<option value=\"".$row['Tutor_Name']."\">".$row['Tutor_Name']."</option>") ;
}
echo "</select>";
mysql_close($conn);
?>