CODEWITHSUNDEEP
phpajaxdrop-down-menu
Sharayu
Sharayu

Reputation: 15

dependent dropdown is not showing dropdown list data

I am trying to create dependent dropdown where a person can select a particular shop depending on a region like south, north, east, west. I have created a database where 4 columns are present like id,region_id, region, store name. I have 2 dropdowns one shows the region and another shows store name. Both are called from the database. Region dropdown is showing all regions.but store name is blank. I am trying to fetch stores by region id. if region_id==' ' then it will call select query where region_id gets a match. I need help if I am doing anything wrong. That's why I am not getting the results.

Code: dashboard.php

<tr>
    <th>
    <label for="inputPassword3" class="col-md-5 control-label">Date</label>
        <div class="col-md-6">
            <input type="date" class="form-control  c-square c-border-2px c-theme" id="inputEmail3-55" placeholder="" name="date"> 
        </div>
    </th>
    <th> 
        <div class="form-group">
        <label for="inputPassword3" class="col-md-3 control-label">Region</label>
            <div class="col-md-6">
                <select class="form-control  c-square c-border-2px c-theme" name="region" id="region">
                <?php 
                    $sql = mysqli_query($link, "SELECT DISTINCT region FROM store_details");
                    while ($row = $sql->fetch_assoc()){
                    echo "<option value=\"owner1\">" . $row['region'] . "</option>";
                    }
                ?>
                </select>
            </div>
        </div>
    </th>
    <?php $region_id =(isset($_POST['region_id']));{
            echo $region_id;
    }?>
    <th>
        <div class="form-group">
            <label for="inputPassword3" class="col-md-6 control-label">Store Name</label>
                <div class="col-md-6">
                    <select class="form-control  c-square c-border-2px c-theme" name="store_details" id="states-list">
                    <option value=''>Select Store</option>
                    </select>
                </div>
        </div>
    </th>
</tr>

SerachRegion.php

<?php
    require_once('DbConnection.php');
    if(isset($_POST['region_id'])){
    $region_id =$_POST['region_id'];
}
    if($region_id!=''){
        $states_result = $conn->query('select * from store_details where region_id='.$region_id.'');
        $options = "<option value=''>Select store</option>";
        while($row = $states_result->fetch_assoc()){
            $options .= "<option value='".$row['region_id']."'>".$row['name']."</option>";
        }
        echo $options;
        }
?>

Ajax Code:

<script>
$('#region').on('change', function(){
var region_id = $(this).val();
$.ajax({
type: "POST",
url: "SearchRegion.php",
data:{region_id:region_id},
success: function(result){
$("#states-list").html(result);
}
});
});

</script>

I have checked DbConnection.php file it is working fine. Just the issue is this:enter image description here

Store Name dropdown is blank. and i am not getting any errors.

Upvotes: 0

Views: 744

Answers (2)

Nawin
Nawin

Reputation: 1692

In your PHP function, you check the isset of post value. If you check the isset it returns true or false only for that variable.

For Example: 

$expected_array_got_string = 'somestring';
var_dump(isset($expected_array_got_string['some_key']));

Output Will be:

bool(true)

So You need to change your variable declaration like:

    if(isset($_POST['region_id'])){
       $region_id =$_POST['region_id'];
    }

In your Ajax you need to get this type of value:

$('#region').on('change', function(){
        var region_id = $(this).val();
        $.ajax({
          type: "POST",
          url: "SearchRegion.php",
          data:{region_id:region_id},
          success: function(result){
            $("#states-list").html(result);
        }
        });
    });

EDITED:

This is tested from my end: sample code is

test1.php

<html>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</html> 
<select id="_city">
    <option value="1">
        ONE
    </option>
    <option value="2">
        TWO
    </option>
    <option value="3">
        THREE
    </option>
</select>

<select name="store_details" id="states-list">
    <option value=''>Select Store</option>
</select>
<script>    
 $(document).ready(function () {
    $('#_city').on('change', function(){
          var region_id = this.value;
          $.ajax({
          type: "POST",
          url: "change.php",
          data:{region_id : region_id},
          success: function(result){
                $("#states-list").html(result);
            }
        });
    });
 });
</script>

change.php

<?php

if(isset($_POST['region_id'])){
       $region_id =$_POST['region_id'];
       echo '<option value="'.$region_id.'">'.$region_id.'</option>' ;

       exit;
    }
?>

Try this for ajax call

Upvotes: 1

Mohammad Fareed
Mohammad Fareed

Reputation: 1972

in success call check if the result is empty then append results to id When you change first clear the oldest of the state so that new values come in the place

<script>
$('#region').on('change', function(){
    $("#states-list").html(''); // empty the currnt values
        var region_id = this.value;
        $.ajax({
        type: "POST",
        url: "SearchRegion.php",
        data:'region_id='+region_id,
        success: function(result){
        $("#states-list").append(result); // then append new values
        }
    });
});
</script>

Upvotes: 0

Related Questions