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);
?>

Hi,

you can do like this

<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>

<div id="tutors">
<select name="cat_name" id="m__Category">
<option value="">--Select Subject First--</option>
</select>
<div>

------------------

Then In Ajax File

<select name="cat_name" >
<option>--Select Category--</option>
<? while($row = mysql_fetch_array($result)) {  ?>
<option value=<?=$row['Tutor_Name']?>><?=$row['Tutor_Name']?></option>
<? } ?>
</select>

------------

I hope this code should be work

Thanks
William

Member Avatar for P0lT10n

You wrote fetch_array... You must use fetch_assoc because with array your return is with numerics index, with assoc you return string like index or key...

hi,

we can use both mysql_fetch_array() or mysql_fetch_assoc(). I know this one. Most of all i use array only. If it is working, fine.


Thanks

Member Avatar for P0lT10n

YEs yes i know, but maybe that is... Write error you get julianmoors...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.