How to distinguish between each submit button in foreach loop
My code:
<?php
require_once 'core/init.php';
if($result = $db->query ("SELECT * from countries")) {
if($count = $result->num_rows) {
$rows = $result->fetch_all(MYSQLI_ASSOC);
}
}
?>
<div class="region">
<h1>Europe</h1>
<ul class="country" style ="list-style-type:none">
<?php foreach ($rows as $key => $row) { ?>
<li>
<a href=""=<?php echo $row['country_id']; ?>">
<a href=""=<?php echo $row['region_id']; ?>">
<?php echo $row['country_name']; ?></a> <br>
<?php
if (isset($_FILES['country_img']) === true) {
if (empty($_FILES['country_img']['name']) === true) {
echo 'please choose a file!';
print_r ($_POST);
} else {
$allowed = array('jpg', 'jpeg', 'gif', 'png');
$file_name = $_FILES['country_img']['name'];
$file_extn = end(explode('.', $file_name));
$file_temp = $_FILES['country_img']['tmp_name'];
if (in_array($file_extn, $allowed) ===true) {
if ($_POST['id'] = $_POST['id']) {
addcountryimage($row['country_id'], $file_temp, $file_extn);
}
header ('Location: tes2.php');
break;
}else {
echo 'Incorrect file type. Allowed: ';
echo implode (', ', $allowed);
}
}
}
if (empty($row['country_img'] === false)) {
echo '<img src="', $row['country_img'], '" alt="', $row['country_name'], '\ Image">';
}
?>
<p> <?php echo $row['country_bio']; ?></p>
<?php
global $session_user_id;
if (is_admin($session_user_id) === true) { ?>
<form action="" method="POST" name="" enctype="multipart/form-data">
<input type="hidden" name="id" id="hidden_id">
<input type="file" name="country_img"> <input type="submit" onclick="document.getElementById('hidden_id').value=$row['country_id']" />
</form>
<?php } ?>
<p> <a href="#">Tour to <?php echo $row['country_name']; ?></a></p>
</li>
<?php } ?>
</ul>
<h3> <a href="#">More European Country </a></h3>
</div>
Everything above works, except for the fact that it cannot distinguish between each submit button. For example, when I update the image on the 5th form, it will always update the 1st form. How can i do this?
source to share
The origin of your problem is using multiple attributes id
with the same value in your JavaScript events, this is considered wrong, every element id must be unique, besides, the onclick event with the input of the input form inputs does not work as expected.
Add an incremental counter to your loop and then use to distinguish between the id of the hidden form element.
<?php $i = 0;?>
<?php foreach ($rows as $key => $row) { ?>
....
<input type="hidden" name="id" id="hidden_id_<?php echo $i;?>">
....
<input type="submit" onclick="document.getElementById('hidden_id_<?php echo $i;?>').value=$row['country_id']" />
<?php
$i++;
} ?>
One more note, I think the event onclick
doesn't work fine with inputs of input type, so I suggest replacing it with an event onsubmit
in the form itself as:
<form action="" method="POST" name="" enctype="multipart/form-data" onsubmit="document.getElementById('hidden_id_<?php echo $i;?>').value=$row['country_id']">
source to share