PHP POST request - not able to get the first row MYSQL - php

Question

I am currently creating an image gallery website, and somehow no matter what I do, the first image that I posted on the system is always unavailable. I have this 'show info' button on the image, which does a post request that calls on the showinfo.php.
This is the display.php that displays all available image in the database.
if ($method == "0") {
$stmt = $conn->prepare("SELECT * FROM image");
$stmt->execute();
$result = $stmt->get_result();
echo "
<div class='container'>
<div class='row text-center' style='display:flex; flex-wrap: wrap;'>";
while ($row2 = $result->fetch_assoc()) {
echo "<div class='col-md-3 col-sm-4'>
<div class='thumbnail'>
<img src='".$target_dir.$row2['filename']."'>
<div class='caption'>
<h4>".$row2['name']."</h4>
</div>
<p>
<form action='showinfo.php' method='POST' enctype='multipart/form-data'>
<input type='hidden' name='image_id' value='".$row2['id']."'>
<button name='showinfo' class='btn btn-primary'>More Info</button>
</form>
</p>
</div>
</div>";
}
echo "</div> </div>";
}
This is how it looks like on the webpage, notice that the first image/first row of the table in mysql will still be fetched:
And when click on the 'more info' button, it will redirect to the showinfo.php, which shows something like this:
However, it never works for the first image. I have done some testings, it never gets to the showinfo.php page and it will always redirect back to the homepage after I click the button. I have used postman to do a post request, setting the image_id to 1 and that gets me the info page of the first image, just not when the button is clicked. I am using XAMPP 5.6.37
This is the expected result I should get for the first image
Ignore the jammed up stuff.. but the post request goes through.
This is the showinfo.php code

Answer 1

Why using form to show data of that product on next page what if user copy link and share it to somewhere else it will not have it's post data in it and result will be error page with no data. So far better way to use it.
if ($method == "0") {
$stmt = $conn->prepare("SELECT * FROM image");
$stmt->execute();
$result = $stmt->get_result();
echo "
<div class='container'>
<div class='row text-center' style='display:flex; flex-wrap: wrap;'>";
while ($row2 = $result->fetch_assoc()) {
echo "<div class='col-md-3 col-sm-4'>
<div class='thumbnail'>
<img src='".$target_dir.$row2['filename']."'>
<div class='caption'>
<h4>".$row2['name']."</h4>
</div>
<p>
<a href='showinfo.php?image_id=".$row2['id']."'> <button name='showinfo' class='btn btn-primary'>More Info</button></a>
</p>
</div>
</div>";
}
echo "</div> </div>";
}
on showinfo.php page you can use $_GET['image_id'] to get data from mysql as per image id and will work globally everywhere with link.

Answer 2

thanks for all the suggestions. Someone mentioned that I should try to take our the redirect code to see why the problem is happening. I did that, and I was able to get the first image's info without any issue. So I look into the code on my homepage ... It turns out it's none of the issues we talked about. On my homepage I have wrapped around the "method" selection code in a form, which is why it's causing that problem. My code originally look like this, and the showImages(this.value) is a js function that will call the display.php shown above.
The div with the id "showimage" is where all the thumbnails show up.
Once I take out the , I was able to solve my issue.
<form>
<div class='form-inline'>
<input class='form-control' type='text' id='menu_search_input' size='50' placeholder="enter content first if searching by name..">
<select class='form-control' id='menu_search' onchange='showImages(this.value)'>
<option value=''>Search by</option>
<option value='0'>Search by Latest</option>
<option value='1'>Search by Image Name</option>
<option value='2'>Search by Category</option>
<option value='3'>Search by Most Popular</option>
<option value='4'>Search by Least Popular</option>
<option value='5'>Search by Most Credit Needs</option>
<option value='6'>Search by Least Credit Needs</option>
</select>
<div id="showimage">Loading images ...</div>
</div>
</form>