Dynamically change select dropdown value using jquery ajax

Question

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

In your ajax you need to add url and pass the id parameter for getting related values. — Alfiza malek
– Alfiza malek, Commented Nov 18, 2016 at 6:30
So @AbhijitBorkakoty can you update your question with the ajax url option, so we can look at it. — Qsprec
– Qsprec, Commented Nov 18, 2016 at 6:35

Alfiza malek · Accepted Answer · 2016-11-18 06:55:14Z

1

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.

answered Nov 18, 2016 at 6:55

Alfiza malek

1,0041 gold badge18 silver badges38 bronze badges

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

2 Comments

Alfiza malek Over a year ago

what was the response for dynamic_select.php?id=7811178?

Abhijit Borkakoty Over a year ago

Thanks @Alfiza for your help...Found the solution. I was not including the autoload file for the classes. Included that and made sure the correct url goes to the php script. Thanks

Alfiza malek · Accepted Answer · 2016-11-18 06:50:49Z

0

<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.

edited Nov 18, 2016 at 6:50

answered Nov 18, 2016 at 6:33

Alfiza malek

1,0041 gold badge18 silver badges38 bronze badges

1 Comment

Qsprec Over a year ago

@Alfizamalek You are passing data two times. One at data option and one at end of the url option.

Collectives™ on Stack Overflow

Dynamically change select dropdown value using jquery ajax

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related