How to pass multiple parameters with Ajax-CodePudding

 <select name="docname"  id="docname"   required>
        <option Value="">Please Choose Doctor</option>
                <?php
                    foreach($data as $crow){
                    echo "<option value='$crow->name'>$crow->name</option>";  
                    }
                    ?>
</select>

 <input type="date" name="bdate"   id="txtHint" required>
 <div  id="txtHint1"></div>

<script>
$(document).ready(function(){
$('#docname').on('change',function(){
var doc_id=this.value;
$.ajax({
url:"subcat.php",
type:"POST",
data:{
doc_id:doc_id
},
cache:false,
success:function(result){
$("#txtHint").html(result);
$('#txtHint1').html('<optionvalue="">SelectDateFirst</option>');
}
});
});

$('#txtHint').on('change',function(){
var date_id=this.value;
$.ajax({
url:"catsubcat.php",
type:"POST",
data:{
date_id:date_id
},
cache:false,
success:function(result){
$("#txtHint1").html(result);
}
});
});
});

</script>

Here you can see Ajax and Other Code. How I Fetch First Ajax value with 3rd Id. For e.g First I select Doctor Name then I select an appointment date and Last I want to fetch the Time slot of That doctor for this date.

Can anyone suggest to me how could I do that??

CodePudding user response：

Pass data like this :

data:{ 'doc_id': doc_id, 'blob_data_username': blob_username, 'blob_data_password': blob_password },

CodePudding user response：

To get doctor name or selected option use $('#docname').val()

<select name="docname"  id="docname" required>
  <option Value="">Please Choose Doctor</option>
  <option value="test">test</option>
  <?php
  foreach($data as $crow){
    echo "<option value='$crow->name'>$crow->name</option>";  
  }
  ?>
</select>

<input type="date" name="bdate"  id="txtHint" required>
<div  id="txtHint1"></div>

<script>
$(document).ready(function() {
  $('#docname').on('change', function() {
    var doc_id = this.value;
    $.ajax({
      url: "subcat.php",
      type: "POST",
      data: {
        doc_id: doc_id
      },
      cache: false,
      success: function(result) {
        // $("#txtHint").html(result); // remove this or your input date  overwritten
        $('#txtHint1').html('<div>Select Date First</div>'); // instead of "<option>" ?
      }
    });
  });

  $('#txtHint').on('change', function() {
    var date_id = this.value;
    $.ajax({
      url: "catsubcat.php",
      type: "POST",
      data: {
        doc_id: $('#docname').val(), // here to get doctor name
        date_id: date_id
      },
      cache: false,
      success: function(result) {
        $("#txtHint1").html(result); // write <option> here?
      }
    });
  });
});
</script>