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
you Must write data Like This
you should return your data as json and then use it
and in your ajax render options like this
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