Fancybox modal，无法从数据库填充输入字段

Question

我在 php codeigniter 中有一个项目，从数据库中获取数据，并使用 foreach 循环在表中创建行，每行都有一个编辑按钮，用于打开 fancybox 模态，在该模态中我有 2 个输入字段，名字和姓氏，我尝试用数据库中的当前值填充它们，在值部分我尝试value="<?php echo $row->first_name ?>，问题是所有行都获得相同的值，模式没有得到正确的数据每一行。

相关代码：

<a data-fancybox data-touch="false" href="#modal" class="btn btn-secondary" style=" margin-bottom:5px;" id="<?php echo $row->id; ?>" type="button" name="button">Edit</a>

<div id="modal">
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <form method="post"  action="<?php echo base_url()?>index.php/welcome/formValidation">
                    <div class="form-row">
                        <div class="col-12 mb-3">
                            <h3 class="mb-3">Modifica Rapid:</h3>
                            <label for="nume">Nume:</label>
                            <input type="text" class="form-control" id="nume" placeholder="Nume" name="nume" value="<?php echo $row->last_name ?>"required>
                        </div>
                        <div class="col-12 mb-3">
                            <label for="prenume">Prenume</label>
                            <input type="text" class="form-control" id="prenume" placeholder="Prenume" name="prenume" value="<?php echo $row->first_name ?>" required>
                        </div>
                        <div class="col-12 mb-3 text-center">
                            <button style="width:150px;height:50px;" class="btn btn-warning" type="submit">Modifica</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Answer 1

您需要做的是，将 $row id 附加到模态 css id，以便每个模态都是唯一的。

<a data-fancybox data-touch="false" href="#modal<?=$row->id;?>" class="btn btn-secondary" style=" margin-bottom:5px;" id="<?php echo $row->id; ?>" type="button" name="button">Edit</a>
<div id="modal<?=$row->id;?>">
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <form method="post"  action="<?php echo base_url()?>index.php/welcome/formValidation">
                    <div class="form-row">
                        <div class="col-12 mb-3">
                            <h3 class="mb-3">Modifica Rapid:</h3>
                            <label for="nume">Nume:</label>
                            <input type="text" class="form-control" id="nume" placeholder="Nume" name="nume" value="<?php echo $row->last_name ?>"required>
                        </div>
                        <div class="col-12 mb-3">
                            <label for="prenume">Prenume</label>
                            <input type="text" class="form-control" id="prenume" placeholder="Prenume" name="prenume" value="<?php echo $row->first_name ?>" required>
                        </div>
                        <div class="col-12 mb-3 text-center">
                            <button style="width:150px;height:50px;" class="btn btn-warning" type="submit">Modifica</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

所以改变

<a data-fancybox data-touch="false" href="#modal" class="btn btn-secondary" style=" margin-bottom:5px;" id="<?php echo $row->id; ?>" type="button" name="button">Edit</a>

到

<a data-fancybox data-touch="false" href="#modal<?=$row->id;?>" class="btn btn-secondary" style=" margin-bottom:5px;" id="<?php echo $row->id; ?>" type="button" name="button">Edit</a>

如果不是所有链接都将仅调用最后一个模态，则通过将行 ID 添加到 css 以获得唯一的模态 ID。 模态变化也有同样的变化

<div id="modal">

到

<div id="modal<?=$row->id;?>">

Answer 2

其中一种解决方法是您可以分配包含last_name 和first_name 数据的data 属性，并将edit-btn 类（作为触发器）添加到编辑按钮链接：

<a data-fancybox data-touch="false" href="#modal" class="btn btn-secondary edit-btn" data-lastName="<?php echo $row->last_name ?>" data-firstName="<?php echo $row->first_name ?>" style=" margin-bottom:5px;" id="<?php echo $row->id; ?>" type="button" name="button">Edit</a>

<div id="modal">
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <form method="post"  action="<?php echo base_url()?>index.php/welcome/formValidation">
                    <div class="form-row">
                        <div class="col-12 mb-3">
                            <h3 class="mb-3">Modifica Rapid:</h3>
                            <label for="nume">Nume:</label>
                            <input type="text" class="form-control" id="nume" placeholder="Nume" name="nume" required>
                        </div>
                        <div class="col-12 mb-3">
                            <label for="prenume">Prenume</label>
                            <input type="text" class="form-control" id="prenume" placeholder="Prenume" name="prenume" required>
                        </div>
                        <div class="col-12 mb-3 text-center">
                            <button style="width:150px;height:50px;" class="btn btn-warning" type="submit">Modifica</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

然后使用每个数据值设置模态输入值：

$(document).on("click", ".edit-btn", function () {
    let lastname = $(this).attr("data-lastname");
    let firstname = $(this).attr("data-firstname");
    $('#nume').val(lastname); // set the lastname input inside the modal using the data attribute
    $('#prenume').val(firstname); // set the firstname input inside the modal using the data attribute
});