Search the Community

Good Day, The basic requirement. I want a list of drop down boxes that will automatically update as you fill in the boxes before them. So say 4 selections, a Primary, Secondary, Auxilary and Reserve selection When Primary is selected, only valid Secondary will be displayed, When Secondary is then selected, only the valid Auxilary will appear and so on. I am trying to update a search system on my website to allow multiple selections for filtering results, but the selections are generated by the content of the results through scanning the MySQL Database and showing only the refinements that would alter the results. Ive got the first 2 boxes linked but for some reason the link wont hold to the 3rd combo box. Each Box starts out as a default "Show All" and upon selecton alters the other boxes appropriately. The initial page code is shown Below. <div id="wb_Form1" style="position:absolute;width:300px;height:300px;"> <form name="contact" method="GET" action="page1.php" id="Form1"> <!----Generate the Primary Catagory Drop Down Menu----> <?php $query = 'SELECT DISTINCT primary_catagory FROM db_class_catagories'; $result = mysqli_query($dbconnection,$query); ?> <select id="p_catagory" name="p_catagory" onchange = "get_sub_data(this); return true;" style="position:absolute;left:0px;top:10px;width:315px;height:20px;z-index:11;text-align:left;"> <option value='all'>Show All</option> <?php while ($row = mysqli_fetch_array($result, MYSQL_ASSOC)){ $query2 = 'SELECT DISTINCT sub_catagory FROM db_class_catagories WHERE primary_catagory = "' . $row['primary_catagory'] .'"'; $result2 = mysqli_query($dbconnection,$query2); $entries = mysqli_num_rows($result2); echo "<option value='" . $row['primary_catagory'] . "'>" . $row['primary_catagory'] . " " . "(" . $entries . ")" . "</option>"; } ?> </select> <!--------Generate Second Drop Down Menu for Sub Catagories ------> <select id="s_catagory" name="s_catagory" style="position:absolute;left:0px;top:40px;width:315px;height:20px;z-index:11;text-align:left;"> <?php $s_catagory = $_GET['s_catagory']; ?> <option value='all'>Show All Sub</option> <?php while ($row = mysqli_fetch_array($result, MYSQL_ASSOC)){ echo "<option value='" . $row['sub_catagory'] . "'>" . $row['sub_catagory'] . "</option>";} ?> </select> <!--------Generate Third Drop Down Menu for Auxilary Catagories ------> <select id="a_catagory" name="a_catagory" style="position:absolute;left:0px;top:70px;width:315px;height:20px;z-index:11;text-align:left;"> <?php $a_catagory = $_GET['a_catagory']; ?> <option value='all'>Show All Aux</option> <?php while ($row = mysqli_fetch_array($result, MYSQL_ASSOC)){ echo "<option value='" . $row['auxilary_catagory'] . "'>" . $row['auxilary_catagory'] . "</option>";} ?> </select> <input type="submit" id="Button1" name="" value="Send" style="position:absolute;left:0px;top:75px;width:96px;height:25px;z-index:7;"> </form> </div> The first combo box is automatically populated with the initial query for primary catagory and then runs a search on each primary for the number of sub canatories available. When a selection is made it runs the get_sub_data() function shown below. function get_sub_data(dropdown) { var p_catagory = dropdown.options[dropdown.selectedIndex].value; alert(p_catagory); var dataString = "primary_catagory='"+p_catagory+"'"; $.ajax({ type: "POST", url: "get_sub_list.php", // Name of the php files data: dataString, success: function(html) { $("#s_catagory").html(html); } }); } This then calls the php script below to update the id s_category with the new data. <?php include("db_connect.php"); if ($_POST) { $primary_catagory = $_POST['primary_catagory']; echo "alert(test);"; if ($primary_catagory != 'all') { $query = "SELECT DISTINCT sub_catagory FROM db_class_catagories WHERE primary_catagory=" . $primary_catagory; $result1 = mysqli_query($dbconnection,$query); echo "<select id='s_catagory' name='s_catagory' onchange = 'get_aux_data(this); return true;'>"; echo "<option value='all'>Show All</option>"; while ($row = mysqli_fetch_array($result1, MYSQL_ASSOC)){ $query3 = 'SELECT DISTINCT auxilary_catagory FROM db_class_catagories WHERE sub_catagory = "' . $row['sub_catagory'] .'"'; $result3 = mysqli_query($dbconnection,$query3); $entries2 = mysqli_num_rows($result3); echo "<option value='" . $row['sub_catagory'] . "'>" . $row['sub_catagory'] . " " . "(" . $entries2 . ")" . "</option>";} echo "</select>"; } else { echo ''; } } ?> This all works fine also, and only added for an idea of how it all runs. The problem is that the function onchange in this box wont trigger to run another ajax function. function get_aux_data(dropdown2) { var s_catagory = dropdown2.options[dropdown2.selectedIndex].value; alert(s_catagory); var dataString = "sub_catagory='"+s_catagory+"'"; $.ajax({ type: "POST", url: "get_aux_list.php", // Name of the php files data: dataString, success: function(html) { $("#a_catagory").html(html); } }); } this in turn is to activate another php page to update a 3rd selection box <?php include("db_connect.php"); if ($_POST) { $sub_catagory = $_POST['sub_catagory']; if ($sub_catagory != 'all') { $query = "SELECT DISTINCT auxilary_catagory FROM db_class_catagories WHERE sub_catagory=" . $sub_catagory; $result1 = mysqli_query($dbconnection,$query); echo "<select name='a_catagory'; echo "<option value='all'>Show All</option>"; while ($row = mysqli_fetch_array($result1, MYSQL_ASSOC)){ $query3 = 'SELECT * FROM db_class_catagories WHERE auxilary_catagory = "' . $row['auxilary_catagory] .'"'; $result3 = mysqli_query($dbconnection,$query3); $entries2 = mysqli_num_rows($result3); echo "<option value='" . $row['auxilary_catagory] . "'>" . $row['auxilary_catagory'] . " " . "(" . $entries . ")" . "</option>";} echo "</select>"; } else { echo ''; } } ?> I cant see what ive forgotten or if there is a limitation on how AJAX is meant to work in this situation but the first combo box populates, upon selection the second one populates, but when a selection is made on the sub_catagory, nothing happens, Ive tried adding alerts to show when scripting stops and the second AJAX just never initiates. Can I call onchange the way I have at the point of the failure? Thanks for any help on this.