CODEWITHSUNDEEP
phpjqueryajax
user5723483
user5723483

Reputation:

echo data into drop list using AJAX

I have this code, where when I click on a value in my first drop list, I need to get new data from MySQL into my second drop list according to my selection.

I have this code here:

$('#sale_type').change(function() {

    // get the form information
    // this can be done in many ways but we are going to put the form 
    // data into a data object
    var formData = {
      'selectedValue' : $('#sale_type').val()
    };

    // send the data via Ajax
    $.ajax({
      type      : 'POST', // the method we want to use to send the data
      url       : 'getTypeDetails.php', // the url where we want to 
                                                // send the data
      data      : formData, // the data object we created
      dataType  : 'json', // what type of data we want to get back
      encode    : true
    })
      // execute function when data has been sent and server
      // code is processed
      .done(function(data) {
            // HERE ADD THE CODE THAT UPDATES THE OTHER DROPLIST
            // I BELIEVE YOU WILL BE ABLE TO ACCESS THE DATA LIKE THIS
            // data[0], data[1]... TO GET THE VALUE 
      });

  });

});

And here is getTypeDetails.php:

<?php
    require_once('../include/global.php');

    $data = $_POST['selectedValue'];

    // Connect to database
    // Use the data to get the new information
    $query = "SELECT * FROM purchases WHERE sale_type = :data";
    // MySQL
    $results = $conn->prepare($query);
    $results->bindValue(":data", $data);
    $exec = $results->execute();
    $res = $results->fetchAll();

    $data = array();
    $i = 0;
    foreach($res as $row){
         $data[i] = $row['sale_details'];
         $i++;
    }

    echo json_encode($data);
?>

the problem is that I can't get the $data[i] into my new drop list with an id=sale_details

So I don't know what to put here:

.done(function(data) {
                // HERE ADD THE CODE THAT UPDATES THE OTHER DROPLIST
                // I BELIEVE YOU WILL BE ABLE TO ACCESS THE DATA LIKE THIS
                // data[0], data[1]... TO GET THE VALUE 
          });

EDIT

Those are my HTML drop lists:

<label for="sale_type" class="col-lg-1 control-label" style="float:right">النوع</label>
                        <select id="sale_type" name="sale_type" class="dropdown-header"  style="float:right">
                                  <option value="undefined">اختر</option>
                                  <?php
                                  foreach($fetchType as $ft){ ?>
                                  <option value="<?php echo $ft['sale_type'] ?>"><?php echo $ft['sale_type'] ?></option>
                                  <?php } ?>
                            </select>
                            <label for="sale_details" class="col-lg-1 control-label" style="float:right">الصنف</label>
                        <select id="sale_details" name="sale_details" class="dropdown-header"  style="float:right">

                            </select>

Upvotes: 1

Views: 531

Answers (2)

Ensieh Parsaeian
Ensieh Parsaeian

Reputation: 110

It should be something like this:

 .done(function(data) {
    var secondDropdown = $("#second-dropdown");
    secondDropdown.empty();
    $.each(data, function(index, value) {
        secondDropdown.append("<option>" + value + "</option>");
    });
   return;
  }

Upvotes: 2

Jakir Hossain
Jakir Hossain

Reputation: 2517

Replace your js code with my code

<script>  
   $(document).ready(function() {
     $('#sale_type').change(function() {
    var formData = { 'selectedValue' : $( "#sale_type option:selected" ).val() };
    console.log(formData);
    $.ajax({
       type: 'POST',  
       url: 'getTypeDetails.php',
       data: formData,
       success: function(data){              
      var obj = jQuery.parseJSON(data);      
      var secondDropdown = $("#sale_details");
      secondDropdown.html('');
      for (var prop in obj) {
         secondDropdown.append("<option>" + obj[prop] + "</option>");
        } 

       },
       error: function(errorThrown){
      alert(errorThrown);
       }

       });

     return false;
     });
   });
  </script>

and add jquery link

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

in your <head> tag

Upvotes: 1

Related Questions