How to get values from Input tag using JAVASCRIPT ,the value of the input tags are fetched from mysql database using php

Question

the JS alert need to appear whenever i'm submitting the box,the alert message need to consists an value which is get from the input tag,the value of the input tags are fetched from mysql database using php,whenever i'm submitting the form the JS alert displays an message with the first value of the table,whenever i'm submitting the remaining form,also it gives an first value from the table without giving the related values HOW to get it? my code is below, check it. php while loop with html tags

<?php
    include "connection.php";
    $sqlll="SELECT * FROM feedback";
    $result=mysqli_query($conn,$sqlll);   
    $count=mysqli_num_rows($result);
    if($count > 0)
    {
        while($row=mysqli_fetch_assoc($result))
        {
 ?>
                <div class="msgshare">
                    <div class="contentt">
                        <div class="userr">
                            <h3><i class="fa fa-user-circle"></i><?php echo $row["username"] ?></h3>
                            <h5><?php echo $row["img_location"] ?></h5>
                        </div>
                        <div class="imgg">
                            <img src="../images/feedback/<?php echo $row["img_file"] ?>" height="400px" width="400px">
                        </div>
                        <div class="likes">
                            <form class="likeform" onsubmit="likeso()" method="POST" action="likes.php">
                                <input type="hidden" id="imgile" name="imaggg" value="<?php echo $row["img_file"] ?>">
                                <?php
                                    $imga=$row['img_file'];
                                    $sql="SELECT * FROM likes WHERE `username`='$user11' AND `image`='$imga' AND `likes`='true';";
                                    $reslt=mysqli_query($conn,$sql);
                                    $row1=mysqli_num_rows($reslt);

                                    $sql3="SELECT * FROM likes WHERE `image`='$imga';";
                                    $rslt=mysqli_query($conn,$sql3);
                                    $count=mysqli_num_rows($rslt);

                                    if($row1 > 0)
                                    {
                                        echo '<button style="cursor:pointer;" name="like" type="submit" id="likepost" class="like-btn"><i id="empty" class="fa fa-heart pink"></i></button> '.$count.' likes';
                                    }
                                    else
                                    {
                                        echo '<button style="cursor:pointer;" class="willlike" name="like" type="submit" id="likepost" class="like-btn"><i id="empty" class="far fa-heart"></i></button> '.$count.' likes';
                                    }
                                ?>
                            </form>
                        </div>
                        <div class="descriptionn">
                            <p><span class="desc">DESCRIPTION : </span><?php echo $row["img_description"] ?></p>
                        </div>
                    </div>
                </div>
<?php
        }
    }
    else
    {
        echo "<p>There is no more Feedbacks are shared...</p>";
    }
?>

the following is an JAVASCRIPT code for an onsubmit event.

<script>
    function likeso()
    {
        var iage=document.querySelector('input').value;
        var val="imagge=" + iage;
        alert(val);

    }
</script>

Answer 1

If you change the function call by adding event

<form class="likeform" onsubmit="likeso(event)" method="POST" action="likes.php">

And alter the function itself to use the event

    function likeso(e)
    {
        var iage=e.target.querySelector('input').value;
        var val="imagge=" + iage;
        alert(val);

    }

Also, you cannot duplicate ID values so

<input type="hidden" id="imgile" name="imaggg" value="<?php echo $row["img_file"] ?>">

should be changed to ( remove ID, it's not needed )

<input type="hidden" name="imaggg" value="<?php echo $row["img_file"] ?>">

The same holds for any element to which you assign an ID - it MUST be unique. If the purpose of the ID is to facilitate easy selection in Javascript using document.getElementById then having duplicate IDs makes a nonsense of that because which element should it select? Generally you can achieve most tasks without using an ID so in many cass it is best to remove them - especially when added in a loop.