CODEWITHSUNDEEP
phpjqueryajax
Abhijit Borkakoty
Abhijit Borkakoty

Reputation: 37

Dynamically change select dropdown value using jquery ajax

I am using two dropdowns in a form for searching. The second dropdown value will change based on the selection of the first one. The ajax request goes but somehow not returning any value from the php script. Any suggestions for change in code?

search.php

<select name="shop_name" id="shop_name">
                  <option value="blank">Select one</option>
                  <?php
                  $searchItem = new dbhandler();
                  $shopData = $searchItem->all_data('food_shops');
                  $i = 0;
                  foreach($shopData as $sd) {
                    ?>
                    <option value="<?php echo $shopData[$i]->r_id; ?>"><?php echo $shopData[$i]->name; ?></option>
                    <?php $i++; } ?>
 </select>

script.js

<script type="text/javascript">
$(document).ready(function()
{
  $("#shop_name").change(function()
{
  var id=$(this).val();
  var dataString = 'id=' + id;
$.ajax
({
  type: "GET",
  url: "dynamic_select.php",
  data: dataString,
  success: function(data)
  {
    $("#location").html(data);
  }
  });

  });

  });

dynamic_select.php

<?php

if($_GET['id']) {

  $crs = $_GET['id'];
?>

  <select name="location" id="location">
<?php
  $searchItem = new dbhandler();
  $searchItem->find('food_shops' , 'r_id', $crs);
  $data = $searchItem->data();
  $j = 0;
  foreach($data as $d) {
    ?>
    <option value="<?php echo $data[$j]->address; ?>"><?php echo $data[$j]->address; ?></option>
  </select>
<?php $j++; } } ?>

The all_data() queries SELECT * FROM table_name and find() queries SELECT * FROM table_name WHERE r_id = $crs

Upvotes: 0

Views: 2812

Answers (2)

Alfiza malek
Alfiza malek

Reputation: 1004

you can check your response with inspector looks like following.In your page you just check that what you are getting in your response.you just let open the inspector network>xhr and then select value from your first dropdown. on selection of dropdown it will call the dynamic_select.php and show to inspector and just select response you will be able to see the response there.

enter image description here

Upvotes: 1

Alfiza malek
Alfiza malek

Reputation: 1004

<script type="text/javascript">
    $(document).ready(function()
    {
      $("#shop_name").change(function()
    {
      var id=$(this).val();
      var dataString = 'id='+ id;

    $.ajax
    ({
      type: "GET",
      data: dataString,
      cache: false,
      url : "dynamic_select.php",
      success: function(data)
      {
        $("#location").html(data);
      }
      });

      });

      });
  </script>

add the url with id in your ajax script ,change the dynamic_select.php path if required.

Upvotes: 0

Related Questions