时间戳

首页 > 解决方案 > Fancybox modal，无法从数据库填充输入字段

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

问题描述

我在 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>

标签： phpjquerycodeigniterfancybox

解决方案

您需要做的是，将 $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;?>">

推荐阅读