dropdown_image

<?php include 'config.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Actors</title>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <style>
        .thumb{
            height: 75px;
            border: 1px solid #000;
            margin: 10px 5px 0 0;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div align="left">
            <a href="main.php"><img src="back.png"></a>
        </div>
    </div>
    <form name="frmdropdown" method="post" action="">
        <div align="center">
            <h2 align="center">List of 'actor'</h2>

            <strong> Select actor : </strong>
            <select name="name">
                <option value="">----ALL----</option>
                <?php
                $dd_res = mysqli_query($conn, "Select name from actor");

                while ($row = mysqli_fetch_array($dd_res)) {
                    echo "<option value='".$row['name']."'>".$row['name']."</option>";
                }
                ?>
            </select>
            <input type="submit" name="find" value="find"/>
            <input type="reset" name="name" onclick="deleteRows('tbl', false);" value="Reset">
            <br><br>

            <table  id="tbl"  border="1">
                <tr align="center">
                    <th align='center' width='100'>Actor Id </th>
                    <th align='center' width='100'>Name </th>
                    <th align='center' width='150'>Path</th>
                    <th align='center' width='80'>Avatar</th>
                </tr>

                <?php
                if($_SERVER['REQUEST_METHOD'] == "POST") {
                    $des = $_POST["name"];
                    if ($des == "")  // if ALL is selected in Dropdown box
                    {
                        $res = mysqli_query($conn, "Select * from actor order by actor_id desc ");
                    } else {
                        $res = mysqli_query($conn, "Select * from actor where name='" . $des . "'");
                    }

                    //  echo "<tr><td colspan='5'></td></tr>";
                    while ($row = mysqli_fetch_array($res)) {
                        echo '<tr>
                     <td align="center" width="100">'.$row['actor_id'].'</td>
                     <td align="center" width="100">'.$row['name'].'</td>
                     <td align="center" width="150">'.$row['path'].'</td>
                     <td align="center" width="80"><img src="data:image/jpeg;base64,'.base64_encode($row['avatar'] ).'" height="50" width="40" class="img-thumnail" /></td>
                     </tr>';
                    }

                  /*  echo '<img src="'.($row['image']).'" height="50" width="40" class="img-thumnail" />';*/
                }
                ?>
            </table>
        </div>
    </form>
</div>


<!-------- clear table ------------>
<script type="text/javascript">
    function deleteRows(id, toDeleteHeader) {
        var obj = document.getElementById(id);
        if(!obj && !obj.rows)
            return;
        if(typeof toDeleteHeader == 'undefined')
            toDeleteHeader = false;
        var limit = !!toDeleteHeader ? 0 : 1;
        var rows = obj.rows;
        if(limit > rows.length)
            return;
        for(; rows.length > limit; ) {
            obj.deleteRow(limit);
        }
    }
</script>

<!-- SCRIPTS -->
<!-- JQuery -->
<script src="js/jquery-3.4.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.js"></script>

</body>
</html>