I have a booking page where I want to disable the time slot, i.e.: the values in a dropdown box if some user has already booked for that particulat time slot.
I want to check the values in the database and then disable them in the dropdown box.
// Start time.
$(".start-time option").each(function() {
if (($(this).text() === $thisVal)) {
$(this).attr('selected', 'selected');
$(this).prevAll().attr('disabled', 'disabled');
}
});
// Change end time.
$(".end-time option").each(function() {
if (($(this).text() === $thisVal)) {
$(this).next().attr('selected', 'selected');
$(this).attr('disabled', 'disabled');
$(this).prevAll().attr('disabled', 'disabled');
}
});
<tr><td align="right"><b>Time : </td><td>Start Time <select class="start-time" name="btime">
<option value="08:00:00">08:00</option>
<option value="08:30:00">08:30</option>
<option value="09:00:00">09:00</option>
<option value="09:30:00">09:30</option>
<option value="10:00:00">10:00</option>
<option value="10:30:00">10:30</option>
<option value="11:00:00">11:00</option>
<option value="11:30:00">11:30</option>
<option value="12:00:00">12:00</option>
<option value="12:30:00">12:30</option>
<option value="13:00:00">13:00</option>
<option value="13:30:00">13:30</option>
<option value="14:00:00">14:00</option>
<option value="14:30:00">14:30</option>
<option value="15:00:00">15:00</option>
<option value="15:30:00">15:30</option>
<option value="16:00:00">16:00</option>
<option value="16:30:00">16:30</option>
<option value="17:00:00">17:00</option>
<option value="17:30:00">17:30</option>
<option value="18:00:00">18:00</option>
<option value="18:30:00">18:30</option>
<option value="19:00:00">19:00</option>
<option value="19:30:00">19:30</option>
<option value="20:00:00" disabled>20:00</option>
</select>
- End Time <select class="end-time" name="etime">
<option value="08:00:00">08:00</option>
<option value="08:30:00">08:30</option>
<option value="09:00:00">09:00</option>
<option value="09:30:00">09:30</option>
<option value="10:00:00">10:00</option>
<option value="10:30:00">10:30</option>
<option value="11:00:00">11:00</option>
<option value="11:30:00">11:30</option>
<option value="12:00:00">12:00</option>
<option value="12:30:00">12:30</option>
<option value="13:00:00">13:00</option>
<option value="13:30:00">13:30</option>
<option value="14:00:00">14:00</option>
<option value="14:30:00">14:30</option>
<option value="15:00:00">15:00</option>
<option value="15:30:00">15:30</option>
<option value="16:00:00">16:00</option>
<option value="16:30:00">16:30</option>
<option value="17:00:00">17:00</option>
<option value="17:30:00">17:30</option>
<option value="18:00:00">18:00</option>
<option value="18:30:00">18:30</option>
<option value="19:00:00">19:00</option>
<option value="19:30:00">19:30</option>
<option value="20:00:00">20:00</option>
</select>
</td></tr>
You can validate the information with PHP at the time the DropDown is loaded.
For example:
<?php
// 1. Build an array with all <option>s of your Dropdown
$arrTime = array();
// 2. Build a loop to print the <option>s of your Dropdown
foreach ($arrTime as $i => $timeValue) {
// 3. Make the necessary connection to the database and check
// if the index of the array can be included in HTML DropDown
if($allowedValue){ ?>
<option value="<?=$timeValue;?>"><?=$timeValue;?></option>
<? }
?>
You can include the code instead of this: