Get data from Database Using Ajax and PHP and Return Result as Dropdown list

Question

I have the idea of what i wanted but need assistance on how to get it done.Below is the scenerio: I have a two dropdwon. The First dropdown is fetched from the DB, which works fine. At the change event of the first dropdown,the system should go to the Database, and fetch the result into the next dropdown. see what I have done so far for assistance: JQUERY SECTION

<script type="text/javascript" src="includes/scripts/newJquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#locate").change(function(){
       var selectedloc = $("#locate option:selected").val();
       $.ajax({type: "POST",url:"process-loc.php",data:{loca:selectedloc}}).done(function(data){
            var ans=jQuery.parse(data);
           //using php-mysql before
           var ps = ans.res;
           $("#subloc").html(ps);

       });
    });
    });
    </script>

FrontEnd(HTML)

 <tr>
    <th>Primary Location:</th>
    <?php 
   $result = mysqli_query($connection,"SELECT * FROM tab_location");?>
    <td>
    <select name="locate" class="form-control" id="locate">
    <option>Select Main Location</option>
    <?php while($rw = mysqli_fetch_array($result)){ ?>
    <option value="<?php echo $rw['location_name'];?>"><?php echo $rw['location_name'];?></option>
      <?php };?>
    </select>
    </td>
  </tr>
   <tr>
    <th>Sub Location:</th>
    <td id="subloc"></td>
  </tr>

Process-loc.php

if(isset($_POST["loca"])){
        include 'includes/session.php';
        include 'includes/db_connection.php';
        include 'includes/functions.php';


        $main = $_POST["loca"];


         $gets = "SELECT * FROM tab_fltlocation WHERE mainloc='".$main."'";
         $get = mysqli_query($connection,$gets);
         $gt = mysqli_fetch_array($get);


         //$nos= $gt['opsNo'];


          if(mysqli_num_rows($get)>=0)
          {
          echo json_encode(array("res"=>$gt));//or do a dropdown using <select name='subloc'><option value=$gt['loc']>$gt['loc']</option></select>
          }else{
          echo json_encode(array("res"=>"0"));
          }

       }
         ?>

This is what I wants to be displayed on the Front End page for the use: $gt['loc'] How can I achieve this.

Premanand K · Accepted Answer · 2016-06-23 13:30:34Z

2

$query   = "
                SELECT 
                    tariff_name
                FROM tariff_setting";
        $result = mysqli_query($this->_connection, $query);

       while ($row = mysqli_fetch_assoc($result)) 
            $response[] = $row['tariff_name'];
       }

$tarrifList = json_encode($response);

// $tarrifList is the response and sent it in json encode format and decode on ajax success

// Javascript Process

 var obj = JSON.parse(resdata);
    var areaOption = "<option value=''>Select State</option>";
     for (var i = 0; i < obj.length; i++) {
         areaOption += '<option value="' + obj[i] + '">' + obj[i] + '</option>'
     }
     $("#patientSelectState").html(areaOption);

edited Jun 23, 2016 at 13:30

answered Jun 23, 2016 at 13:24

Premanand K

6421 gold badge8 silver badges19 bronze badges

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

2 Comments

Premanand K Over a year ago

$tarrifList is send as the response of the ajax call

Premanand K Over a year ago

if its not working, please send me the response of "var ps = ans.res; console.log(ps) in the ajax response.

cssyphus · Accepted Answer · 2016-06-23 13:19:34Z

You can change your AJAX processor to do this:

Process-loc.php

/* Above code the same */
if(mysqli_num_rows($get)>=0) {
    $out = '<select id="selSubLoc"><option value="">Choose One:</option>';
    foreach($gt AS $loc){
        $seld = ($_POST['loca'] == $loc) ' selected' ? : '' ;
        $out .= '<option value="' .$loc. '" ' .$seld. '>' .$loc. '</option>';
    }
    $out .= '</select>';
}else{
    $out = 0;
}

echo $out;

And change your front-end code's AJAX routine to be like this:

$.ajax({
    type: "POST",
     url:"process-loc.php",
    data:{loca:selectedloc}
}).done(function(recd){
    $("#subloc").html(recd);
});

The data received back from PHP will be in HTML format unless you use dataType: to change it, so you can build the HTML over on the PHP side and then just plop it into the #subloc table cell.

It works, I just had to change it to suit my desire, but your response was 100% ok.

line-segment · Accepted Answer · 2016-06-23 13:31:11Z

On the event of the first box call the function containing the ajax which would retrieve information from the database. This ajax call will get data according to the first input. Now query your database and echo the results in a foreach loop(you can make a tag there only). In the ajax 'success:' catch the data and display it.

//from the database
foreach ($info as $product) 
{
echo "<option value=".$product['childsticker_id'].">".$product['name']</option>";
}

      //ajax call page
      success: function(result) 
      {
        $("#states").html(result);
      }

http://www.9lessons.info/2010/08/dynamic-dependent-select-box-using.html

Collectives™ on Stack Overflow

Get data from Database Using Ajax and PHP and Return Result as Dropdown list

3 Answers 3

2 Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Related