mercredi 4 avril 2018

How to link drop-down menu to table using ajax

I am trying to populate a html table based on the selection from drop-down menu. i.e. when I selected an option from drop-down menu, it shows a table having description of that selected item fetched from the database like it fetches a row of that value and shows it in a table.

Now for this, I have to use Ajax & Jquery but i don't know much about ajax.

Can you please help me this?

Here is my code:

$("#courses").change(function(){
  var course = $(this).val();
  $.ajax({
     url:'your php page url',
    type:'post',
    data:'course='+course,
    success:function(response){
    // your drop down box is in response
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="courses" id="courses" class="dropdownclass" ><option selected="selected" value="" disabled selected hidden >-- Select an option --</option>

<?php  
mysql_connect('localhost', 'root', '');
mysql_select_db('db');

$sql = "SELECT spectrum FROM table";
$result = mysql_query($sql);

while ($row = mysql_fetch_array($result)) {
    echo "<option value=' " . $row['courses'] ."'>" . $row['courses'] ."</option>";
}

?>

</select>

I don't know what to add in ajax and where to put the table and link it with drop-down menu. Kindly help me with this.




Aucun commentaire:

Enregistrer un commentaire