I have two select boxes.
Select Room Type
Select Room No.
Here is the php code:
<select id="room_type" name="room_type" class="form-control">
<?php
$selected = $row['room_type'];
while($result = mysqli_fetch_array($getroomtypes)){ ?>
<option value="<?php echo $result['id'];?>" > <?php echo $result['type'];?> </option>
<?php
}
?>
</select></div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Select Room</label>
<div class="col-sm-5">
<select id="room" name="room" class="form-control">
<?php
$selected = $row['room'];
while($result = mysqli_fetch_array($getroom)){ ?>
<option value="<?php echo $result['id'];?>"> <?php echo $result['room'];?> </option>
<?php
}
?>
</select></div>
</div>
So the issue here is Room No. depends on room type. For every room type there are various room numbers. Can anyone suggest me how can i reload the values of room no after selecting the room type?
I am using bootstrap.
You'll need to use JS for reloading room numbers, the way I would do (by no means the best way) is to have a script (mine below uses jQuery), this is faster than fetching the value from a DB but less safe:
$('#room_type').on('change', function(e){ // when the room_type changes
$('#room').remove('option'); // remove all previous options
let maxRooms = e.val() == "Shit Muncher Suite" ? 3 : 0; // set max rooms depending on room_type, e.val() is the room_type
for(var i = 0; i < maxRooms; i++) {
$('#room').add("option").text(i); // add a new option for each room (3)
}
});
If you want potential data from the database to load without your page refreshing, you have to use AJAX. PHP cannot load new data without refreshing the entire page. Hoped I helped :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.