使用具有相关 ID 的 PHP 变量填充输入值

Question

当用户单击所选元素上的按钮时，我正在尝试创建一个表单。但是，当我尝试它时，我单击一个按钮，它要么加载多个，要么加载 1 但只显示一个值，如果这有意义的话。这是我的代码：

<?php

        $sql = "SELECT * FROM services";
        $result = $database->query($sql);

        while ($row = mysqli_fetch_assoc($result)) {

            $id = $row['id'];

?>

            <div class="service_display">
                <div class="service_header"><?php echo $row['service_name']; ?></div>
                <div class="service_desc"><?php echo $row['service_desc']; ?></div>
                <div class="service_options">
                    <button type="button" class="additional_files" id="additional_files">Edit</button>
                </div>
            </div>
<?php
        }

?>

我有一个表单，当按下按钮时会出现 jQuery，我试图用相应的 id 填充值。这是我的代码：

                <div class="show-onclick">
                    <h3>Edditing service: <?php echo $row['service_name']; ?></h3>
                    <hr>
                    <form action="inc/save_edit.php?id=<?php echo $row['id']; ?>" class="service_editform">
                        <input type="text" name="service_name" value="<?php echo $row['service_name']; ?>">
                        <textarea><?php echo $row['service_desc']; ?></textarea>
                    </form>
                </div>

我认为问题在于我不知道将代码放在哪里，如果我把它放在 while 循环中，它可以工作，但可以理解的是，我弹出了 10 个输入字段..

如果我把它放在while循环之外并运行一个单独的查询来填充它，它是空的..

Answer 1

根据您对问题的解释，很明显您将表单与前端显示 div 一起循环，这不是一个好主意。

总是最好使用一个模式窗口，然后根据点击情况，您必须将数据加载到该窗口上，然后将其弹出。

无论如何，对于您的场景，可能有不止一种解决方案，但这个解决方案也可以达到目的：

将“show-onclick”整个 div 放在“service_display”div 中，这样现在它也可以毫无问题地循环播放。 现在，当单击按钮时，找到最近的“service_display”div，它将为您提供 dom 元素，然后使用它并弹出包含在其中的“show-onclick”div。

按照下面的代码：

<?php
        $database = new mysqli("localhost", "root", "", "so");
        $sql = "SELECT * FROM services";
        $result = $database->query($sql);

        while ($row = $result->fetch_assoc()) {

            $id = $row['id'];

?>

            <div class="service_display" id="sd_<?php echo $row['id']; ?>">
                <div class="service_header"><?php echo $row['service_name']; ?></div>
                <div class="service_desc"><?php echo $row['service_desc']; ?></div>
                <div class="service_options">
                    <button type="button" class="additional_files" id="additional_files">Edit</button>
                </div>

                <div class="show-onclick">
                    <h3>Edditing service: <?php echo $row['service_name']; ?></h3>
                    <hr>
                    <form action="inc/save_edit.php?id=<?php echo $row['id']; ?>" class="service_editform">
                        <input type="text" name="service_name" value="<?php echo $row['service_name']; ?>">
                        <textarea><?php echo $row['service_desc']; ?></textarea>
                    </form>
                </div>
            </div>
<?php
        }

?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".show-onclick").css("display", "none");
    $(document).on("click", ".additional_files", function() {
        $(".show-onclick").css("display", "none");
        var sd_id=$(this).closest('div.service_display').attr("id");
        $("#"+sd_id+" .show-onclick").css("display", "block");      
    });
});
</script>

我对您的代码所做的唯一更改是我在 service_display div 中添加了一个动态 id 字段。 我使用 jquery 来显示和隐藏各个点击按钮的形式。

在这里我再次使用了基于 oop 的 mysqli，这不是强制性的，你的也很好。