Home>

I want to create a simple seat reservation system on the web page.
In preparation,
Create a program that allows you to check the name of the seat (button) selected on the linked page by selecting the desired seat (button) from the array of buttons that look like a seat and pressing the enter button. I was able to do.

1: Select the desired seat on the seat selection page


2: Press the confirmation button in the selected state


3: Press the OK button in the displayed window and confirm the seat number selected anew on the linked page.

Next, based on the data of the selected seat, we want to prevent the same seat from being selected (so that multiple people cannot select the same seat).

Probably a server? I think I need to accumulate data for a seat that has already been selected somewhere and refer to it
To be honest, I don't know the things and programs that are needed to make it happen. . .

We are currently making the above seat reservation system using MANP.

Question

As for the question, it is necessary to make it impossible to select a seat that has already been selected based on the transmitted data (value of the seat button) (full)
In addition, I would appreciate it if you could tell me about the contents of the program that should be added or modified in the following program.
It will be a very rough and round-throwing question, but there are many things that I don't understand and I hope you can lend me some wisdom.
Thank you.

Applicable source code

Seat selection form

<html>
<head>
<meta charset = "utf-8">
<title>Seat selection form</title>
</head>
<body>
<form method = "get" action = "Seat Confirmation Form.php">
<input type = "checkbox" name = "c []" value = "A-1"><input type = "button" value = "A-1">
<input type = "checkbox" name = "c []" value = "A-2"><input type = "button" value = "A-2">
<input type = "checkbox" name = "c []" value = "A-3"><input type = "button" value = "A-3">
<input type = "checkbox" name = "c []" value = "A-4"><input type = "button" value = "A-4">
<input type = "checkbox" name = "c []" value = "A-5"><input type = "button" value = "A-5"><br>
<input type = "checkbox" name = "c []" value = "B-1"><input type = "button" value = "B-1">
<input type = "checkbox" name = "c []" value = "B-2"><input type = "button" value = "B-2">
<input type = "checkbox" name = "c []" value = "B-3"><input type = "button" value = "B-3">
<input type = "checkbox" name = "c []" value = "B-4"><input type = "button" value = "B-4">
<input type = "checkbox" name = "c []" value = "B-5"><input type = "button" value = "B-5"><br>
<input type = "checkbox" name = "c []" value = "C-1"><input type = "button" value = "C-1">
<input type = "checkbox" name = "c []" value = "C-2"><input type = "button" value = "C-2">
<input type = "checkbox" name = "c []" value = "C-3"><input type = "button" value = "C-3"><input type = "checkbox" name = "c []" value = "C-4"><input type = "button" value = "C-4">
<input type = "checkbox" name = "c []" value = "C-5"><input type = "button" value = "C-5"><br><br>
<input type = "submit" value = "confirm"><br>
</form>
</body>
</html>
<style>
[name = "c []"] {display: none;}
[name = "c []"]: checked + .cx {background-Color: yellow;}
</style>
<script type = "text/javascript">
    window.addEventListener ('DOMContentLoaded', function (e) {
  document.querySelector ('# f1'). addEventListener ('submit', function (e) {
    var c = []. map.call (document.querySelectorAll ('[name = "c []"]: checked'), function (x) {
      return x.value;
    }). join (",");
    if (c === "") {
      alert ("Please select a seat");
      e.preventDefault ();
    } else {
      if (! confirm (c + "is selected. Are you sure?")) {
        e.preventDefault ();
      }
    }
  });
  [] .forEach.call (document.querySelectorAll ('. cx'), function (x) {
    x.addEventListener ('click', function (e) {
      var t = e.target;
      var n = document.querySelector ('# c' + t.value);
      n.checked =! n.checked;
    });
  });
});
    </script>


Seat confirmation form

<? PHP
$c = filter_input (INPUT_GET, "c", FILTER_DEFAULT, FILTER_REQUIRE_ARRAY);
if (! is_null ($c)) {
  print "Selected seat:". implode (",", $c). "<br>";
}
?>
  • Answer # 1

    LocalStrage or
    You can keep it in sessions, cookies, etc.
    If you want to keep the data on the server side, let it be recorded as a file
    Data will be stored in DB

  • Answer # 2

    I don't know what the reservation site actually uses, but
    In order to realize what the questioner wants to do, please do as follows.

    -Holds the seat selection status in the database.
    -The seat selection status is acquired from the database at the next selection, so that a seat that has already been selected cannot be selected.

    In the "Disable selection" part, should disabled be applied to the button of the seat in the selected state?

  • Answer # 3

    [With illustration] Absolutely understand! What is the web application service mechanism?
    First of all, read from here ...