Home>

I want to create a simple seat reservation system on the web page.
In preparation,
I want to be able to confirm the seat (button) selected on the linked page by selecting the desired seat (button) in the array of buttons that look like a seat and pressing the enter button. .

As an image

・ Arrange multiple buttons, select one of them, and press the enter button
Example: (□ □ □ ■ □ [Determination])

-Press the OK button to display a page confirming the selected button
Example: (Is the selected button number 4? [Confirmation])

・ Display confirmation page
Example: (Thank you for selecting No. 4)

It ’s like

.

Currently
1. Arrange multiple buttons
2. Give each button a name (value)
3. Know if the button is selected (button color changes)

is completed.

In addition to the currently completed programs 1,2,3 above,
[About a program that displays the information (name) of the selected button on the linked page by pressing the [Enter] button while the button is selected]
is.

We know how to type a sentence into a designated location such as an inquiry form and transfer the content.
However, if you try to do it with a button, it will not work.

I use html, php, javascript.
Please lend us your wisdom, sorry for the long and difficult-to-understand text.
Thank you.

Problems i am experiencing

`` `
I don't know how to determine which button is selected and how to send it and receive it on the next page.

  • Answer # 1

    What should I do with radio buttons?
    For example:

    <input type = "radio" name = "r" id = "r1" value = "1"><input type = "button" value = "1 "onclick =" document.querySelector ('# r1'). checked = true "></label>
    <input type = "radio" name = "r" id = "r2" value = "2"><input type = "button" value = "2" onclick = "document.querySelector ('# r2') .checked = true "></label>
    <input type = "radio" name = "r" id = "r3" value = "3"><input type = "button" value = "3" onclick = "document.querySelector ('# r3') .checked = true "></label>
    <input type = "radio" name = "r" id = "r4" value = "4"><input type = "button" value = "4" onclick = "document.querySelector ('# r4') .checked = true "></label>
    <input type = "radio" name = "r" id = "r5" value = "5"><input type = "button" value = "5" onclick = "document.querySelector ('# r5') .checked = true "></label>
    Checkbox version
    <input type = "checkbox" name = "c" id = "c1" value = "1"><input type = "button" value = "1 "onclick =" document.querySelector ('# c1'). checked =! document.querySelector ('# c1'). checked ">
    <input type = "checkbox" name = "c" id = "c2" value = "2"><input type = "button" value = "2" onclick = "document.querySelector ('# c2') .checked =! document.querySelector ('# c2'). checked ">
    <input type = "checkbox" name = "c" id = "c3" value = "3"><input type = "button" value = "3" onclick = "document.querySelector ('# c3') .checked =! document.querySelector ('# c3'). checked ">
    <input type = "checkbox" name = "c" id = "c4" value = "4"><input type = "button" value = "4" onclick = "document.querySelector ('# c4') .checked =! document.querySelector ('# c4'). checked ">
    <input type = "checkbox" name = "c" id = "c5" value = "5"><input type = "button" value = "5" onclick = "document.querySelector ('# c5') .checked =! document.querySelector ('# c5'). checked ">


    * Removed unnecessary javascript notation

    Full version
    [name = "c []"] {display: none;}
    [name = "c []"]: checked + .cx {background-Color: red;}
    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 ("not checked");
          e.preventDefault ();
        } else {
          if (! confirm (c + "checked. OK?")) {
            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;
        });
      });
    });
    <? PHP
    $c = filter_input (INPUT_GET, "c", FILTER_DEFAULT, FILTER_REQUIRE_ARRAY);
    if (! is_null ($c)) {
      print "checked:". implode (",", $c). "<br>";
    }
    ?>
    <form method = "get" id = "f1">
    <input type = "checkbox" name = "c []" id = "c1" value = "1"><input type = "button" value = "1">
    <input type = "checkbox" name = "c []" id = "c2" value = "2"><input type = "button" value = "2">
    <input type = "checkbox" name = "c []" id = "c3" value = "3"><input type = "button" value = "3">
    <input type = "checkbox" name = "c []" id = "c4" value = "4"><input type = "button" value = "4">
    <input type = "checkbox" name = "c []" id = "c5" value = "5"><input type = "button" value = "5"><br>
    <input type = "submit" value = "go">
    </form>

  • Answer # 2

    That ’s oneone wayfrom what I've answered in the past.
    If you submit a submit button with the same name and another value in the same form, and press the button to send, you can get the value of the button you pressed on the receiving php side.

Related articles