Disable seat buttons that was previously booked by other user in javascript

user_14506199 0
Viewed 99

I am developing a ticket booking system in laravel. That will allow users to booked their seats. Now I want to disable those seats that was previously booked by some other user. Booked seats number are already passed in the blade through an array. The seat buttons are dynamically generated based on total seat number. I want to disable those booked seats by their value. Like A1,A2 are booked so buttons that contains value A1 & A2 will be disabled. Here is my HTML code

<form class="form-control" style="width: auto">
                <div class="btn-group btn-group-sm"  id="col1Buttons" style="display: inline-grid; padding: 10px;">
                </div>
                <div class="btn-group btn-group-sm"  id="col2Buttons" style="display: inline-grid; margin-right: 15px;">
                </div>
                <div class="btn-group btn-group-sm"  id="col3Buttons" style="display: inline-grid; margin-left: 15px;">
                </div>
                <div class="btn-group btn-group-sm"  id="col4Buttons" style="display: inline-grid; padding: 10px;">
                </div>
            </form>

//{{$all_seats}} contains all booked seats//

javascript code for appending seat buttons

<script>
var pages = {{$seat_number/4}};
// console.log(pages);
var page1Buttons = $('#col1Buttons');
var page2Buttons = $('#col2Buttons');
var page3Buttons = $('#col3Buttons');
var page4Buttons = $('#col4Buttons');

for (var j=65; j<65+pages; j++){
    page1Buttons.append('<input class="btn single_seat" name="options"  type="button" id="seat" value="' + String.fromCharCode(j) + '' + 1 + '"/>');
    page2Buttons.append('<input class="btn single_seat" name="options"  type="button" id="seat" value="' + String.fromCharCode(j) + '' + 2 + '"/>');
    page3Buttons.append('<input class="btn single_seat" name="options"  type="button" id="seat" value="' + String.fromCharCode(j) + '' + 3 + '"/>');
    page4Buttons.append('<input class="btn single_seat" name="options"  type="button" id="seat" value="' + String.fromCharCode(j) + '' + 4 + '"/>');
}
laravel javascript
1 Answers

Switch to rendering in blade

Instead of rendering your HTML in JavaScript, it's my advice that you just switch this rendering of the buttons into blade. This way you get total control of what's going on and you can easily check if the seat number is already taken.

You can use for loop which already has index, and apply the same logic as in JS

Assign JS variable a value

If you really want to keep the JS method, before loading the script that will do the rendering of the buttons, make sure to declare new JS variable like

<script>
const taken = "@json($all_seats)"
</script>

The above code should do the trick with making the right conversion so you can now use taken inside your rendering script and do the checks.

Once you have the taken seats in an array, you can just check if the seat number is in the array:

if(taken.includes(seat_number)){
 ... Generate disabled button
}
else{
 ... Generate normal button
}
user_93714170
Related