Home » Php » php – Why is $_POST[''] not working with <form>

php – Why is $_POST[''] not working with <form>

Posted by: admin February 25, 2020 Leave a comment

Questions:

This is a Rock Paper Scissors game and I am just starting on it, but it will not display the $_POST['keuzen'].

So I don’t get why this is not working. Tried many things but can’t find a good solution.

<?php session_start(); ?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>RockPaperScissor</title>
    </head>
    <body>
        <form action="RockPaperScissor.php" method="post">
            <input type="image" src="steen.jpg" alt="steen" name="keuzen" value="steen" title="Steen">
            <input type="image" src="papier.jpg" alt="papier" name="keuzen" value="papier" title="Papier">
            <input type="image" src="schaar.jpg" alt="schaar" name="keuzen" value="schaar" title="Schaar">
        </form>
        <?php
            if (isset($_POST['keuzen'])) {
                $keuzen = $_POST['keuzen'];
                $kiezenuit = array("steen", "papier", "schaar");
                $random = rand(0, 2);
                $computer = $kiezenuit[$random];

                echo 'jij koos ' . $keuzen . '<br>';
                echo 'De computer koos ' . $computer . '<br';

                if ($keuzen == $computer) {
                    echo 'Resultaat : Draw ';
                }
            }
        ?>
    </body>
</html>
How to&Answers:

Assuming the form is in the same RockPaperScissor.php page, better introduce a hidden field that takes the value of a clicked image, but remove the name tag from the images itself:

<?php session_start(); ?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>RockPaperScissor</title>
    </head>
    <body>
        <form action="RockPaperScissor.php" method="post">
            <input type="hidden" name="keuzen" value="">
            <input type="image" src="steen.jpg" alt="steen" value="steen" title="Steen" onclick="document.forms[0].keuzen.value=this.value">
            <input type="image" src="papier.jpg" alt="papier" value="papier" title="Papier" onclick="document.forms[0].keuzen.value=this.value">
            <input type="image" src="schaar.jpg" alt="schaar" value="schaar" title="Schaar" onclick="document.forms[0].keuzen.value=this.value">
        </form>
        <?php
            if (!empty($_POST['keuzen'])) {
                $keuzen = $_POST['keuzen'];
                $kiezenuit = array("steen", "papier", "schaar");
                $random = rand(0, 2);
                $computer = $kiezenuit[$random];

                echo 'jij koos ' . $keuzen . '<br>';
                echo 'De computer koos ' . $computer . '<br>';

                if ($keuzen == $computer) {
                    echo 'Resultaat : Draw ';
                }
            }
        ?>
    </body>
</html>

Upon POST, you will get the following:

Array
(
    [keuzen] => schaar
    [x] => 7
    [y] => 3
)

jij koos schaar
De computer koos schaar
Resultaat : Draw    

Answer:

The purpose of <input type="image" name="keuzen"> is to provide a server side image map. It submits the form as a side effect, but the purpose is to select coordinates on the image.

When you click it, x and y coordinates will be sent to the server.

If I remember correctly, you’ll get something like keuzen.y=123&keuzen.x=456 which PHP will use to populate $_POST['keuzen_x'] and $_POST['keuzen_y'] but not $_POST['keuzen'].

If you do a var_dump($_POST) you can see the data structure you actually get.


If you want to just have regular submit buttons which look like images, then use regular submit buttons containing images:

<button name="keuzen" value="steen"><img src="steen.jpg" alt="steen"></button>

You can style away the borders and background of the button element with CSS if you like.

Answer:

  1. Change names of inputs like this: name="keuzen[steen]" and remove value attributes.
  2. Read POSTed value like this: $keuzen = array_keys($_POST['keuzen'])[0];

You can also verify that the POSTed value is not empty.