ok
Mini Shell
<?php include 'header.php' ;
include 'admin/config/config.php' ;
?>
<style>
/* Targeting date input specifically */
input[type="date"].form-control1 {
color: #848484;
background-color: #ecf1f8;
height: 50px;
line-height: 50px;
padding: 20px 10px 20px 20px;
font-size: 13px;
font-weight: 600;
border: 0;
border-radius: 4px;
margin-bottom: 30px;
width: 100%;
}
input[type="date"].form-control1:focus {
border-color: var(--pbmit-global-color);
color: var(--pbmit-body-typography-color);
}
input[type="date"].form-control1:hover {
border-color: var(--pbmit-global-color);
}
</style>
<div class='row' >
<div class="col-md-2" > </div>
<div class="col-md-8" >
<div class="contact-form" style="margin-top:100px">
<div class="pbmit-heading-subheading">
<h1 class="pbmit-subtitle">Book a Appointment</h1>
<h2 class="pbmit-title"></h2>
</div>
<form method="post" action="" id="appointment_form" accept-charset="utf-8">
<div class="row">
<div class="col-sm-4">
<label class="required" for="patient_name">Patient's Name</label><span style="color:red">*</span>
<input type="text" name="patient_name" id="patient_name" value="" placeholder="Enter Patient's Name" class="form-control" required/>
</div>
<div class="col-sm-4">
<label class="required" for="patient_number1">Phone Number</label><span style="color:red">*</span>
<input type="text" name="patient_number1" id="patient_number1" value="" placeholder="Enter Phone Number" class="form-control" required/>
</div>
<div class="col-sm-4">
<label class="required" for="patient_number1">Alternate Phone Number</label>
<input type="text" name="patient_number2" id="patient_number2" value="" placeholder="Enter Phone Number" class="form-control"/>
</div>
<div class="col-sm-4">
<label class="required" for="address">Address</label><span style="color:red">*</span>
<input type="text" name="address" id="address" value="" placeholder="Enter Address" class="form-control" required/>
</div>
<div class="col-sm-4">
<label class="required" for="doctor">Select Doctors</label><span style="color:red">*</span>
<select class="form-control" name="doctor" id="doctor" style="padding:0px 10px" required>
<option value="">Select Doctor</option>
<?php
$statement = $pdo->prepare("SELECT * FROM tbl_doctor WHERE status='Active'");
$statement->execute();
$doctor = $statement->fetchAll(PDO::FETCH_ASSOC);
foreach ($doctor as $doc) { ?>
<option value="<?=$doc['doctor_name']?>"><?=$doc['doctor_name']?></option>
<?php } ?>
</select>
</div>
<div class="col-sm-4">
<label class="required" for="date">Appointment Date</label><span style="color:red">*</span>
<input type="date" name="date" id="date" value="" class="form-control1" style="padding:0px 10px" required/>
</div>
<div class="col-sm-4">
<label class="required" for="time">Time Slot</label><span style="color:red">*</span>
<select id="time" name="time" class="form-control" style="padding:0px 10px" required>
<option value="">Select Time Slot</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group" style="text-align:center;margin-top:10px">
<button type="submit" id="submit" name="submit" class="btn btn-success">Add Appointment Details</button>
</div>
</div>
</form>
</div>
</div>
</div>
<?php include 'footer.php' ?>
<script type="text/javascript">
$(document).ready(function() {
$('#date').on('change', function() {
time_slot();
});
});
$('#appointment_form').on('submit', function(e) {
e.preventDefault();
// $('#loading-div').show();
// $('#content-div').hide();
$("#submit").prop('disabled', true);
var formData = new FormData(this);
$.ajax({
url: 'admin/apis/booking_appointment.php',
type: 'post',
dataType: 'json',
data: formData,
cache: false,
contentType: false,
processData: false,
enctype: 'multipart/form-data',
success: function (response) {
console.log(response);
if(response['status'] == 200){
$('#appointment_form').trigger("reset");
$("#submit").prop('disabled', false);
// $('#success-div').show();
// $('#loading-div').hide();
toastr.success(response['message']);
} else {
$("#submit").prop('disabled', false);
// $('#loading-div').hide();
// $('#content-div').show();
toastr.error(response['message']);
}
}
});
});
function time_slot() {
var date = $('#date').val();
$.ajax({
url: 'admin/apis/time_slot.php?date=' + date,
type: 'get',
success: function(response) {
$('#time').html(response);
}
});
}
</script>
Zerion Mini Shell 1.0