Dynamic dependent select boxes (PHP+JQuery+AJAX)

Question

I have been working on a dependent select boxes form using PHP as the server-side language and JQuery with Ajax. I am having an issue with getting the response text, as it is not displaying as options in the second select box.

P.S. I am new to Ajax and there is no video that can help me with my problem.

HTML&PHP:

<center><form method="post" action="php/functions.php" id="catForm">
<select name="catSelect" class="catSelect" name="category">
<option value='null' default>اختر الفئة:</option>
<?php 
        $selectCategories = mysqli_query($connectionDB, "SELECT * FROM categories");

        while($categoriesDisplay = mysqli_fetch_array($selectCategories)){
    echo '<option value="'.$categoriesDisplay['id'].'">'.$categoriesDisplay['category'].'</option>';
        }
 ?>
</select><br/><br/>

<select name="subCatSelect" class="subCatSelect">
<option value="null" default>اختر النوع:</option>
<?php
$catSelectVal = $_POST['catSelect'];
$selectSubCat = mysqli_query($connectionDB, "SELECT * FROM sub_categories WHERE id LIKE '$catSelectVal'");

while($subCatDisplay = mysqli_fetch_array($selectSubCat)){
    echo '<option value="'.$subCatDisplay['id'].'">'.$subCatDisplay['subCategory'].'</option>';
}

?>
</select><br/>
<h1></h1>
<input type="submit" value="اختر" class="submitForm" /><br/>
</form></center>

Jquery code:

$(document).ready(function(){
    $('.catSelect').change(function(){
        var changeURL = $('#catForm').attr("action");
        var data = $('.catSelect').val();
        $.post(changeURL, {category : data}, function(subCategory){
            $('.subCatSelect').append(subCategory);
        });
    });
});

The code that should work on getting the options for the second select box:

$catSelectVal = $_POST['catSelect'];
$selectSubCat = mysqli_query($connectionDB, "SELECT * FROM sub_categories WHERE id LIKE '$catSelectVal'");

while($subCatDisplay = mysqli_fetch_array($selectSubCat)){
    echo '<option value="'.$subCatDisplay['id'].'">'.$subCatDisplay['subCategory'].'</option>';
}

Did you do any debugging using the browsers js debugger. Specifically this line `var data = $('.catSelect').val();` — RiggsFolly, Jul 13 '16 at 23:42
Also a `print_r($_POST);` in the PHP script would probably identify another error — RiggsFolly, Jul 13 '16 at 23:43
This will help you http://stackoverflow.com/questions/2780566/get-selected-value-of-a-dropdowns-item-using-jquery — RiggsFolly, Jul 13 '16 at 23:45
You are wide open to [SQL Injections](http://php.net/manual/en/security.database.sql-injection.php) and should really use [Prepared Statements](http://php.net/manual/en/mysqli.quickstart.prepared-statements.php) instead of concatenating your query. — M. Eriksson, Jul 13 '16 at 23:49

score 0 · Answer 1 · answered Jul 14 '16 at 02:34

0

I could be wrong, but I don't think you've sent 'catSelect' in the ajax request.. rather you've sent category with data being the value from 'catSelect'

So when you look for $catSelectVal = $_POST['catSelect']; there won't be anything to find.

Try instead: $catSelectVal = $_POST['category'];

As @RiggsFolly mentioned, if you print_r($_POST); you'll instantly see if this is the case or not.

answered Jul 14 '16 at 02:34

John Detlefs

952
8
16

I have done that, it works now; however my results are duplicated as such "category" -> "sub-category1, sub-category2, sub-category1, sub-category2" – Khalid Jul 25 '16 at 14:21
I have been trying to work my way around it, watched some videos and looked at some codes. yet nothing seems to help. – Khalid Jul 25 '16 at 14:21
I'm not 100% sure what you mean here, but assuming it's an issue with the keys, perhaps try `mysqli_fetch_assoc` instead of `mysqli_fetch_array`? – John Detlefs Jul 25 '16 at 22:31

Dynamic dependent select boxes (PHP+JQuery+AJAX)

1 Answers1