javascript - 如何区分foreach循环中的每个提交按钮

Question

我的代码:

<?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'], '\'s 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>

上面的一切都有效，除了它不能区分每个提交按钮。例如，当我更新第 5 种形式的图像时，它总是会更新第 1 种形式。我该怎么做？

Answer 1

问题的根源是在 JavaScript 事件中使用多个具有相同值的 id 属性，这被认为是错误的，每个元素 id 必须是唯一的，除此之外，带有提交类型输入的 onclick 事件表格无法正常工作。

在循环中添加一个增量计数器，然后用于区分每个表单隐藏元素的 id。

<?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++;
} ?>

另一个注意事项，我认为 onclick 事件不能很好地处理提交类型的输入，所以我建议在表单本身中用 onsubmit 事件替换它:

<form action="" method="POST" name="" enctype="multipart/form-data" onsubmit="document.getElementById('hidden_id_<?php echo $i;?>').value=$row['country_id']">