如何点击图片href并转到新页面。 并显示来自phpmyadmin的信息

Question

I am trying to use a image from a folder; click on it and make it select an id from the image to display information from phpmyadmin.

This is my php where I call for the info:

<meta charset="UTF-8">
<?php
include "dbcon.php";

$id = $_POST['val'];
try {
    $sql = "select name,discription FROM upcoming_events where id = '$id'";//if i put 1 or 2 for the $id it works
        $result = $pdo->query($sql);
} catch (PDOException $ex) {
    echo 'Error fetching scores: '.$e->getMessage();
    }

        $row = $result -> fetch();
    $name = $row[0];
    $discription = $row[1];

    $gildiUt = "Nafnið er $name<br> lýsing er $discription";

?>

<?php 
include "../php/upcoming.php";
echo $gildiUt;
 ?>

This is the error I get when I try to run it. It does not show $name of $discription but it does if I but in 1 or 2 for $id.

Notice: Undefined index: val in

E:\utsdata\hopar\GRU_H4\php\upcoming.php on line 5 Nafnið er lýsing er

Nafnið er lýsing er

This is my html where the images is and the value is used to find the id but it does not find the id. I am not sure if my value works for a image.

     <form action="upcoming.php" method="post">
         <input type"image" name"val" value="1"> <li class="col-lg-3 col-md-2 col-sm-3 col-xs-12"><a href="../upcoming/upcoming.html.php"><img src="../myndir/upcoming/mynd1.png" alt=""width="200" height="300"></a></li>
         <input type"image" name"val" value="2"> <li class="col-lg-3 col-md-2 col-sm-3 col-xs-12"><a href="../upcoming/upcoming.html.php"><img src="../myndir/upcoming/mynd2.png" alt=""width="200" height="300"></a></li>
         <input type"image" name"val" value="3"> <li class="col-lg-3 col-md-2 col-sm-3 col-xs-12"><a href="../upcoming/upcoming.html.php"><img src="../myndir/upcoming/mynd3.png" alt=""width="200" height="300"></a></li>
         <input type"image" name"val" value="4"> <li class="col-lg-3 col-md-2 col-sm-3 col-xs-12"><a href="../upcoming/upcoming.html.php"><img src="../myndir/upcoming/mynd4.png" alt=""width="200" height="300"></a></li>
         <input type"image" name"val" value="5"> <li class="col-lg-3 col-md-2 col-sm-3 col-xs-12"><a href="../upcoming/upcoming.html.php"><img src="../myndir/upcoming/mynd5.png" alt=""width="200" height="300"></a></li>
         <input type"image" name"val" value="6"> <li class="col-lg-3 col-md-2 col-sm-3 col-xs-12"><a href="../upcoming/upcoming.html.php"><img src="../myndir/upcoming/mynd6.png" alt=""width="200" height="300"></a></li>
         <input type"image" name"val" value="7"> <li class="col-lg-3 col-md-2 col-sm-3 col-xs-12"><a href="../upcoming/upcoming.html.php"><img src="../myndir/upcoming/mynd7.png" alt=""width="200" height="300"></a></li>
         <input type"image" name"val" value="8"> <li class="col-lg-3 col-md-2 col-sm-3 col-xs-12"><a href="../upcoming/upcoming.html.php"><img src="../myndir/upcoming/mynd8.png" alt=""width="200" height="300"></a></li>
         <input type"image" name"val" value="9"> <li class="col-lg-3 col-md-2 col-sm-3 col-xs-12"><a href="../upcoming/upcoming.html.php"><img src="../myndir/upcoming/mynd9.png" alt="" width="200" height="300"></a></li>
         <input type"image" name"val" value="10"> <li class="col-lg-3 col-md-2 col-sm-3 col-xs-12"><a href="../upcoming/upcoming.html.php"><img src="../myndir/upcoming/mynd10.png" alt=""width="200" height="300"></a></li>
         <input type"image" name"val" value="11"> <li class="col-lg-3 col-md-2 col-sm-3 col-xs-12"><a href="../upcoming/upcoming.html.php"><img src="../myndir/upcoming/mynd11.png" alt="" width="200" height="300"></a></li>
         <input type"image" name"val" value="12"> <li class="col-lg-3 col-md-2 col-sm-3 col-xs-12"><a href="../upcoming/upcoming.html.php"><img src="../myndir/upcoming/mynd12.png" alt=""width="200" height="300"></a></li>
      </form>

Answer 1

An <a> tag will make a GET request to the server.

Try having a link like this:

<a href="../upcoming/upcoming.html.php?val=1" />

and then accessing the variable using $_GET[val]

As the comments have suggested, you are not binding your parameters which makes your entire site vulnerable to SQL injection. Try taking a look this