skip to Main Content

I am new and still learning on AJAX call and I cant figure out why my AJAX call only calls data for one dropdown list only. Okay, the scenario is that I have 3 dropdown list in my form which are to select a doctor, display consultation fee and provide list of appointment date. The problem I’m facing is that when a doctor is selected in the doctor dropdown list, the AJAX call will only loads the data for the appointment date dropdown list. It didn’t load the consultation fee.

Here are my code for doctor, consultation fee and appointment date dropdown list:

<div>
  <label>Select Doctor</label>
  <select name="doctor" id="get_doctor_name" onchange="getfee()" autocomplete="off" required>
    <option hidden value="">Select Doctor</option>
  </select>
</div>

<div>
  <label>Consultation Fee</label>
  <select name="fees" id="get_doctor_fee" autocomplete="off" readonly>
  </select>
</div>

<div>
  <label>Appointment Date</label>
  <select name="appdate" id="get_date">
  </select>
</div>

UPDATED: Here are the script for the AJAX call with function getfee() and getdate():

<script>
      //function for fee details
      function getfee() 
      {
        $("#loaderIcon").show();
        jQuery.ajax(
        {
          url: "getfee.php",
          data: {doctor : $("#get_doctor_name").val()},
          type: "POST",
          success: function(data) 
          {
            $("#get_doctor_fee").html(data);
            $("#loaderIcon").hide();
          },
          error: function() {}
        });
      }

      //function for appointment date details
       function getdate() {
       $("#loaderIcon").show();
       jQuery.ajax({
       url: "getslot-date.php",
       data: {doctor : $("#get_doctor_name").val()},
       type: "POST",
       success: function(data) {
         $("#get_date").html(data);
        $("#loaderIcon").hide();
       },
       error: function() {}
    });
 }
    </script>

Here are code in getfee.php in the AJAX call script:

<?php
include('incl/connection.php');
if(!empty($_POST['doctor'])) 
{
    $doctor =$_POST['doctor'];

    $sql = "SELECT D_FEES FROM tbldoctor 
            WHERE D_ID=:doctor";

    $query = $dbh->prepare($sql);
    $query->bindParam(':doctor',$doctor,PDO::PARAM_STR);
    $query->execute();
    if (!$query->execute()) {
    print_r($query->errorInfo());
}
    $results=$query->fetchAll(PDO::FETCH_OBJ);
    $cnt=1;
    if($query->rowCount() > 0) 
    {
        foreach($results as $results) 
            { 
               echo '<option readonly value="'.htmlentities($results->D_FEES).'">'. htmlentities($results->D_FEES).'</option>';
            }
    }
    else
    {
       echo '<option value=""> No Doctor in this specilization</option>';
       echo "<script>$('#submit').prop('disabled',true);</script>"; 
    }
}
?>

Here are code in getslot-date.php in the AJAX call script:

<?php
include('incl/connection.php');
if(!empty($_POST['doctor'])) 
{
    $doctor =$_POST['doctor'];
    $sql = "SELECT T_ID, T_DATE, T_TIME FROM tbltimeslot 
            WHERE D_ID=:doctor AND A_ID IS NULL";

    $query = $dbh->prepare($sql);
    $query->bindParam(':doctor',$doctor,PDO::PARAM_STR);
    $query->execute();
    if (!$query->execute()) {
    print_r($query->errorInfo());}
    $results=$query->fetchAll(PDO::FETCH_OBJ);
    $cnt=1;
    if($query->rowCount() > 0) 
    {
        foreach($results as $results) 
        {
            echo '<option value="'.htmlentities($results->T_ID).'">'.htmlentities($results->T_DATE).' @ '.htmlentities($results->T_TIME).'</option>';
        }
    }
    else
    {
       echo '<option value=""> No available date</option>';
       echo "<script>$('#submit').prop('disabled',true);</script>"; 
    }
}
?>

And below are the table for tbldoctor and tbltimeslot:

CREATE TABLE `tbldoctor` (
  `D_ID` int(11) NOT NULL,
  `D_SPECILIZATION` varchar(255) NOT NULL,
  `D_NAME` varchar(255) NOT NULL,
  `D_FEES` varchar(255) DEFAULT NULL
)

CREATE TABLE `tbltimeslot` (
  `T_ID` int(11) NOT NULL,
  `T_DATE` date NOT NULL,
  `T_TIME` time NOT NULL,
  `D_ID` int(11) NOT NULL,
  `A_ID` int(11) DEFAULT NULL
)

2

Answers


  1. you Must write data Like This

    function getfee() {
           $("#loaderIcon").show();
           jQuery.ajax({
           url: "getslot-date.php",
           data: {doctor : $("#get_doctor_name").val()},
           type: "POST",
           success: function(data) {
             $("#get_date").html(data);
            $("#loaderIcon").hide();
           },
           error: function() {}
        });
     }
    
    Login or Signup to reply.
  2. you should return your data as json and then use it

    $results=$query->fetchAll(PDO::FETCH_OBJ);
    // remove all code after it, and add the following line
    echo json_encode($results);
    

    and in your ajax render options like this

    function getfee() 
          {
    
            $.ajax(
            {
              url: "getfee.php",
              data: {doctor : $("#get_doctor_name").val()},
              type: "POST",
              beforeSend: function() {
              //start loader
                 $("#loaderIcon").show();
              },
              error: function() {  // hide loader when error otherwise will stuck on your screen
              $("#loaderIcon").hide();}
              success: function(objJson) 
              {
                var data = $.parseJSON(objJson);
                console.log(data); // to view how it looks in console, array, empty or whatever
                $('#get_doctor_fee').empty();
                if(data.length > 0) {
                  $.each(data, function(key, value) {
                    $('#get_doctor_fee').append('<option value="'+ value.D_FEES+'">'+ value.D_FEES +'</option>');
                  });
                } else {
                    $('#get_doctor_fee').append('<option value="">No Doctor in this specilization </option>');
                    $('#submit').prop('disabled',true);
                }
                $("#loaderIcon").hide();
              },
            });
          }
    

    you can apply the same adjustment for other dropdown, its just a sample to show you how to manage it.

    and one more thing you can change is calling your functions, this way functions can be more customizable and have more control., but its upto how you like

    $('#get_doctor_name').on('change', function() {
        // call your ajax here
          ...
          url: "getfee.php",
          data: {doctor : $(this).val()},
          type: "POST",
          ...
          // update get_doctor_fee here
    })
    
    $('#get_doctor_fee').on('change', function() {
        // call your ajax here
          ...
          url: "getslot-date.php",
          data: {doctor : $(this).val()},
          type: "POST",
          ... 
          // update get_date dropdown
    })
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search