使用 PHP 在新页面中使用 HTML 表单编辑填充了 MySQL 数据库的 HTML 表行

debugcn 发表于 Dev

米格尔·阿劳霍

所以，我正在编写一个新的 CMS，旨在插入与客户相关的商业报告，但我需要一些帮助，因为我对 PHP 和 MySQL 有点菜鸟。

我需要做的是用我创建的 HTML 表单打开一个新页面，并用我在表格中选择的行的内容填充它。

在这种情况下，“客户”（这是我需要编辑的内容），他们都有唯一的 ID。

我将尝试在下面的图片中展示我想要做什么。

这是内容所在的表格，我希望能够单击右侧的编辑链接，并在新页面上打开它，并填充所有表单。

桌子

这是我需要用所选行的内容填充的表单。

形式

这是表的代码：

<?php
$db_host = 'localhost';
$db_user = 'root';
$db_pass = '';
$db_name = 'minicms';

$conn = mysqli_connect($db_host, $db_user, $db_pass, $db_name);
if (!$conn) {
    die ('ERROR CONNECTING TO DB: ' . mysqli_connect_error());  
}

$sql = 'SELECT * 
        FROM clients';

$query = mysqli_query($conn, $sql);

if (!$query) {
    die ('SQL Error: ' . mysqli_error($conn));
}
?>

<table class="table table-striped">
    <thead class="thead-color">
        <tr>
            <th scope="col">Designação Social</th>
            <th scope="col">Nome</th>
            <th scope="col">NIF</th>
            <th scope="col">Rua</th>
            <th scope="col">Código Postal</th>
            <th scope="col">Localidade</th>
            <th scope="col">País</th>
            <th scope="col">E-mail</th>
            <th scope="col">Editar</th>
        </tr>
    </thead>
    <tbody>
        <?php
        while ($row = mysqli_fetch_array($query))
        {
            echo '<tr>
                    <td>'.$row['namefat'].'</td>
                    <td>'.$row['name'].'</td>
                    <td>'.$row['nif'].'</td>
                    <td>'.$row['street'].'</td>
                    <td>'.$row['postal'].'</td>
                    <td>'.$row['local'].'</td>
                    <td>'.$row['country'].'</td>
                    <td>'.$row['email'].'</td>
                    <td><a href=""><i class="fa fa-edit"></i></a></td>
                </tr>';
        }?>
    </tbody>
</table>

这是表单的代码：

<form>
    <div class="form-group">
        <label for="namefat">Designação Social</label>
        <br>
        <input type="text" name="namefat" class="form-control" id="namefat">
    </div>
    <div class="form-group">
        <label for="name">Nome</label>
        <br>
        <input type="text" name="name" class="form-control" id="name">
    </div>
    <div class="form-group">
        <label for="nif">NIF</label>
        <br>
        <input type="text" name="nif" class="form-control" id="nif">
    </div>
    <div class="form-group">
        <label for="street">Rua</label>
        <br>
        <input type="text" name="street" class="form-control" id="street">
    </div>
    <div class="form-group">
        <label for="postal">Codigo Postal</label>
        <br>
        <input type="text" name="postal" class="form-control" id="postal">
    </div>
    <div class="form-group">
        <label for="local">Localidade</label>
        <br>
        <input type="text" name="local" class="form-control" id="local">
    </div>
    <div class="form-group">
        <label for="country">País</label>
        <br>
        <input type="text" name="country" class="form-control" id="country">
    </div>
    <div class="form-group">
        <label for="email">E-mail</label>
        <br>
        <input type="text" name="email" class="form-control" id="email">
    </div>
    <button type="submit" class="btn btn-primary">Adicionar</button>
</form>

希望我能够正确解释我的问题

夏亚姆·乔希

你可以做的是把它放在引导模式中，除了你的 ,

tr行

 echo '<tr>
                    <td>'.$row['namefat'].'</td>
                    <td>'.$row['name'].'</td>
                    <td>'.$row['nif'].'</td>
                    <td>'.$row['street'].'</td>
                    <td>'.$row['postal'].'</td>
                    <td>'.$row['local'].'</td>
                    <td>'.$row['country'].'</td>
                    <td>'.$row['email'].'</td>
                    <td><a href="" data-toggle="modal" data-target="#exampleModal'.$rowId."><i class="fa fa-edit"></i></a></td>
                    <div class="modal fade" id="exampleModal'.$rowId.'>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

<!-- put your form code inside this  with jquery submit with ajax
   you can populate your entire form with values here 
 -->

<form>
<div class="form-group">
    <label for="namefat">Designação Social</label>
    <br>
    <input type="text" name="namefat" class="form-control" id="namefat">
</div>
<div class="form-group">
    <label for="name">Nome</label>
    <br>
    <input type="text" name="name" class="form-control" id="name">
</div>
<div class="form-group">
    <label for="nif">NIF</label>
    <br>
    <input type="text" name="nif" class="form-control" id="nif">
</div>
<div class="form-group">
    <label for="street">Rua</label>
    <br>
    <input type="text" name="street" class="form-control" id="street">
</div>
<div class="form-group">
    <label for="postal">Codigo Postal</label>
    <br>
    <input type="text" name="postal" class="form-control" id="postal">
</div>
<div class="form-group">
    <label for="local">Localidade</label>
    <br>
    <input type="text" name="local" class="form-control" id="local">
</div>
<div class="form-group">
    <label for="country">País</label>
    <br>
    <input type="text" name="country" class="form-control" id="country">
</div>
<div class="form-group">
    <label for="email">E-mail</label>
    <br>
    <input type="text" name="email" class="form-control" id="email">
</div>
<button type="submit" class="btn btn-primary">Adicionar</button>
 </form> </div> </tr>';

这样，您甚至不需要有一个单独的页面来更改提交此 ajax 请求时的数据，甚至不需要刷新页面的表单，从而节省创建新页面和完成编辑所需的额外时间，而无需真正更改页面

所以代替这个

?>
      <tr>
                    <td><?php echo $row['namefat'];?></td>
                    <td> <?php echo $row['name'];?> </td>
                    <td> <?php echo $row['nif'];?>  </td>
                    <td><?php echo $row['street'];?> </td>
                    <td><?php echo $row['postal'];?></td>
                    <td><?php echo $row['local'];?></td>
                    <td><?php echo $row['country'];?> </td>
                    <td> <?php echo $row['email'];?></td>
<td><a href="" data-toggle="modal" data-target="#exampleModal<?php echo $row['id'];/* possible unique id */ ?>"><i class="fa fa-edit"></i></a></td>
<div class="modal fade" id="exampleModal<?php echo $row['id'];/* possible unique id */ ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

<!-- put your form code inside this  with jquery submit with ajax
   you can populate your entire form with values here 
 -->

<form>
<div class="form-group">
    <label for="namefat">Designação Social</label>
    <br> 
    <input type="text" name="namefat" class="form-control" id="namefat" value="<?php echo $row['namefat'];?>">
</div>
<div class="form-group">
    <label for="name">Nome</label>
    <br>
    <input type="text" name="name" class="form-control" id="name" value="<?php echo $row['name'];?>">
</div>
<div class="form-group">
    <label for="nif">NIF</label>
    <br>
    <input type="text" name="nif" class="form-control" id="nif" value=" <?php echo $row['nif'];?> ">
</div>
<div class="form-group">
    <label for="street">Rua</label>
    <br>
    <input type="text" name="street" class="form-control" id="street" value="<?php echo $row['street'];?>">
</div>
<div class="form-group">
    <label for="postal">Codigo Postal</label>
    <br>
    <input type="text" name="postal" class="form-control" id="postal" value="<?php echo $row['postal'];?>">
</div>
<div class="form-group">
    <label for="local">Localidade</label>
    <br>
    <input type="text" name="local" class="form-control" id="local" value="<?php echo $row['local'];?>">
</div>
<div class="form-group">
    <label for="country">País</label>
    <br>
    <input type="text" name="country" class="form-control" id="country" value="<?php echo $row['country'];?>">
</div>
<div class="form-group">
    <label for="email">E-mail</label>
    <br>
    <input type="text" name="email" class="form-control" id="email" value="<?php echo $row['email'];?>">

     <input type="hidden" name="id" class="form-control" id="email" value="<?php echo $row['id']; /* possible unique id */ ?>">
</div>
<button type="submit" class="btn btn-primary">Adicionar</button>
 </form> </div>
</tr>

<?php

这将在每一列中显示一个表单，这只是在你的 php 文件脚本标签中添加引导文件、bootstrap.js 和 bootstrap.css 的问题

你可以在这里读到它

https://getbootstrap.com/docs/4.0/components/modal/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。