CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Jack Isaacs
Jack Isaacs

Reputation: 106

Add second SELECT on change of first SELECT (PHP/AJAX) Not working as it should

firstly, let me express that I have tried four methods (All slightly different) that all seem to produce the same issue, which is no data being outputted, even simple echo 'test' to rule out a DB issue (and also trying TEST in html on the called page, no result.

Here is a snapshot of the HTML and Javascript:

(document).on('change','category_id',function(){
    var id = $(this).val();
    $.ajax({
        method: 'POST',
        url: 'supportgetsubcats.php',
        data: {'subcatid' : id},
        success: function(data){
            $('#subcatresponse').hide().html(data).fadeIn(); // update the DIV
        }
    });
});

<div class="form-group">
                    <label class="col-sm-2 control-label">Category *</label>
                    <div class="col-sm-4">
                        <select class="form-control" class="category_id" name="category_id" id="category_id">
                            <option value="" selected="selected">-- Select --</option>
                            <?php
                            $query="select * from support_categories where hide = '0' or hide is NULL order by name ASC";
                            $rs=sqlsrv_query($conn,$query);
                            while($row=sqlsrv_fetch_array($rs))
                            {
                                extract($row);
                                ?>
                                <option value="<?php echo $id; ?>"><?php echo $name; ?></option>
                                <?php
                            }
                            ?>
                        </select>
                    </div>
                </div><!-- form-group -->
                <div class="form-group">
                    <div id="subcatresponse" name="subcatresponse" class="col-sm-4">
                    </div>
                </div><!-- form-group -->

Here is the PHP that is called: 

<?php require_once("includes/header.php");
error_reporting(E_ALL);
echo 'TEST';
if(isset($_POST["subcatid"])){
    // Capture selected country
    $category = $_POST["subcatid"];

    $query="select * from support_subcategories where parent_category = '" . $category . "' order by name ASC";
    $rsp=sqlsrv_query($conn,$query);
    $subCatArr = array();
    while($row=sqlsrv_fetch_array($rsp))
    {
      $subcat = $row['name'];
      array_push($subCatArr, $category, $subcat);
    }

    // Display city dropdown based on country name
    if($category == '-- Select --'){
    } else {
        echo '<label class="col-sm-2 control-label">Sub Category</label>';
        echo '<select class="form-control" name="subcategory_id" id="subcategory_id">';
        foreach($subCatArr[$category] as $value){
            echo '<option value="'. $value .'">'. $value .'</option>';
        }
        echo "</select>";
    }
}
?>

I get no response, not even basic text back, so I am not entirely sure what is wrong with the AJAX call, jQuery is included and proven to be working as the menu system on this interface won't display without jQuery so I am confident that is not the issue.

It looks like for whatever reason, the data from the HTML Select is not being passed to the AJAX call for POST.

Any thoughts greatly appreciated, TIA.

Upvotes: 0

Views: 621

Answers (2)

user2556381
user2556381

Reputation:

Try changing

(document).on('change', 'category_id', function() { to

$(document).on('change', '#category_id', function() {

The second parameter to the on call takes a selector, but you seem to be passing in the name of the element instead. The name of the element is used when trying to access the element in PHP, and you use the selector (id, class, element) in JavaScript.

Alternatively, you could also use

$('#category_id').on('change', function()

You haven't posted it in your question, but in case you don't have it, it is always a good idea to only execute your jQuery code after the page has finished loading, otherwise your code may be trying to access an element that hasn't been loaded yet.

Surround your jQuery code with

$(document).ready(function() {
    // Run jQuery code
}

Upvotes: 2

Rotimi
Rotimi

Reputation: 4825

add type='POST' to your ajax call

Also change this

(document).on('change','category_id',function(){

to

$(document).on('change','category_id',function(){

Upvotes: 1

Related Questions