I have worked on 2 PHP pages, called "booking.php" and "fetch_book_time.php".
Within my booking.php (where the jquery trigger is)
<?php
include ("conn.php");
include ("functions.php");
?>
$(document).ready(function(){
$(".form-group").on("change", ".ajax-venue", function(){
$(".ajax-date").trigger("change"); // if .ajax-venue is changed,
}); // then trigger change on .ajax-date
$(".form-group").on("change", ".ajax-date", function(){
// var getData = all my data here
$.ajax({
type: "POST",
url: "fetch_book_time.php",
data: getData,
cache: false,
success: function(getTime){
$("#ajax-time").html(getTime);
}
});
});
});
The HTML
<div class="form-group">
Venue: <br>
<select id='ajax-venue' class="ajax-venue">
<?php
$sql = mysqli_query($conn,"SELECT * FROM slot");
while($row=mysqli_fetch_array($sql)){
echo "<option value='".$row['slot_venue']."'>".$row['slot_venue']."</option>";
}
?>
</select>
</div>
<div class="form-group">
Date: <br>
<input id="ajax-date" type="date" class="ajax-date"></input>
</div>
<div id="ajax-time" class="form-group">
Start Time:<br>
<input id="ajax-sTime" class="ajax-sTime" type="time"></input><br>
End Time:<br>
<input id="ajax-eTime" class="ajax-eTime" type="time"></input>
</div>
inside my fetch_book_time.php (ajax page)
<?php
include ("conn.php");
include ("functions.php");
// code and logic here then echo back the codes below
// input sent back to booking.php into #ajax-time
?>
After spending hours troubleshooting, I discovered that the issue was with the include files in fetch_book_time.php.
If I remove the include files from fetch_book_time.php, the Jquery triggers can function as intended, which is to trigger a change on the date input every time the venue is changed.
Any assistance or suggestions would be greatly appreciated, as I am still learning Jquery and hoping to make progress in this project. Thank you.