how to click on a image href and go to a new page. and display information from a phpmyadmin

hey 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";

?>

this is the error i get when i try to run it. it  dose not show $name of $discription but it dose if i but in 1 or 2 for $id

<!-- begin snippet: js hide: false -->

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

put it dose not find the id. i am not sure if my value works for a image

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