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

Question

我在php codeigner中有一个项目，从数据库中提取数据，通过foreach循环，它在表中创建行，每行都有一个打开fancybox模式的编辑按钮，在该模式中，我有两个输入字段，名字和姓氏，我试图用数据库中的当前值填充它们，在值部分，我尝试了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
});