Dynamic Dependent Select Box using jQuery, Ajax and PHP

Question

This is for a University project. I'm trying to create two select boxes which are Manufacturer and Model. The selected choice will then affect the query that will be executed to then populate the select box. It don't work.

HTML

<select name="manufacturername" id="manufacturername" class="form-control">
                            <option selected>Choose...</option>
                            <?php $ret="SELECT * FROM tblmodel INNER JOIN tblmanufacturer ON tblmodel.ManufacturerCode = tblmanufacturer.ManufacturerCode";
                            $query= $dbh -> prepare($ret);
                            //$query->bindParam(':id',$id, PDO::PARAM_STR);
                            $query-> execute();
                            $results = $query -> fetchAll(PDO::FETCH_OBJ);
                            if($query -> rowCount() > 0)
                            {
                                foreach($results as $result)
                                {
                                    ?>
                                    <option value="<?php echo htmlentities($result->ManufacturerCode);?>"><?php echo htmlentities($result->ManufacturerName);?></option>
                                <?php }} ?>
                        </select>
<select name="modelname" id="modelname" class="form-control">
                            <option selected>Choose...</option>
                        </select>

AJAX

if(isset($_POST["ManufacturerCode"]) && !empty($_POST["ManufacturerCode"])){
$query = $db->query("SELECT * FROM tblmodel INNER JOIN tblmanufacturer ON tblmodel.ManufacturerCode = tblmanufacturer.ManufacturerCode WHERE tblmanufacturer.ManufacturerCode = ".$_POST['ManufacturerCode']);
$rowCount = $query->num_rows;
if($rowCount > 0){
    echo '<option value="">Select Model</option>';
    while($row = $query->fetch_assoc()){
        echo '<option value="'.$row['ModelCode'].'">'.$row['ModelName'].'</option>';
    }
}else{
    echo '<option value="">Model not available</option>';
}

}

JAVASCRIPT

<script type="text/javascript">
$(document).ready(function(){
    $('#manufacturername').on('change',function(){
        var ManufacturerCode = $(this).val();
        if(ManufacturerCode){
            $.ajax({
                type:'POST',
                url:'AJAXdata.php',
                data:'ManufacturerCode='+ManufacturerCode,
                success:function(html){
                    $('#modelname').html(html);
                }
            });
        }else{
            $('#modelname').html('<option value="">Select model first</option>');
        }
    });
});

What's your problem? When does it fail/not do the expected? You haven't given anything concise as to where the problem lies exactly. If you alert(html); in your success in your AJAX function, do you get any error messages, or does everything function fine, query-wise? — Martin
– Martin, Commented May 29, 2018 at 15:34

Hesam Farhang · Accepted Answer · 2018-05-12 09:56:52Z

1

try "method: 'POST'" instead of "type: 'POST'"

<script type="text/javascript">
$(document).ready(function(){
    $('#manufacturername').on('change',function(){
        var ManufacturerCode = $(this).val();
        if(ManufacturerCode){
            $.ajax({
                method:'POST',
                url:'AJAXdata.php',
                data:'ManufacturerCode='+ManufacturerCode,
                success:function(html){
                    $('#modelname').html(html);
                }
            });
        }else{
            $('#modelname').html('<option value="">Select child first</option>');
        }
    });
});

answered May 12, 2018 at 9:56

Hesam Farhang

944 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamic Dependent Select Box using jQuery, Ajax and PHP

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related