单击按钮 php mysql 后，在模式弹出窗口上显示基于所选 id 的数据

2022-01-17 00:00:00 modal-dialog php javascript mysql ajax

在我的网站上，当点击按钮时，它会提示弹出一个窗口.我使用模态弹出窗口.我的问题是，我无法根据按钮的 id 获取正确的数据.下面是我的代码:html表:

On my website, when the button is clicked, it will prompt to a popup window. Im using the modal popup window. My problem is, I cant get the right data that being retrieved based on the id of the button. Below is my code: The html table:

<tbody>
<?php
$counter = 1;
$data = "SELECT * FROM family"; 
                    $result = $conn->query($data);                          

                        while($ser=mysqli_fetch_array($result)) 
                        {

?>  
                                            <tr>
                                                <td><center><?php echo $counter; 
                                                                    $counter++; ?></center></td>
                                                <td><center><?php echo $ser['fam_id'];?></center></td>
                                                <td><center><?php echo $ser['fam_name']; ?></center></td>

                                                <td><center><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" data-id=<?php echo $ser['fam_id'];?>>Edit Attendance Status</button></center>

fam_id 是主键.

那么，下面是模态弹窗的代码

Then, below is the code for modal popup window

<!-- Modal -->
<form id="form1" method="post">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="fam_id">Name <?php echo $ser['fam_name'];?></h4>
      </div>
      <div class="modal-body">
        <b>Details</b>
        <hr></hr>
        Address: <?php echo $ser['fam_add']; ?><p></p>
        Phone_num: <?php echo $ser['fam_phone']; ?><p></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
</form>

此外，我将它们放在一个文件中.总结如下:

Moreover, Im doing them in one file. In conclusion, it is like below:

<tbody>
    <?php
    $counter = 1;
    $data = "SELECT * FROM family"; 
                        $result = $conn->query($data);                          

                            while($ser=mysqli_fetch_array($result)) 
                            {

    ?>  
                                                <tr>
                                                    <td><center><?php echo $counter; 
                                                                        $counter++; ?></center></td>
                                                    <td><center><?php echo $ser['fam_id'];?></center></td>
                                                    <td><center><?php echo $ser['fam_name']; ?></center></td>

                                                    <td><center><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" data-id=<?php echo $ser['fam_id'];?>>Edit Attendance Status</button></center>

<!-- Modal -->
    <form id="form1" method="post">
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title" id="fam_id">Name <?php echo $ser['fam_name'];?></h4>
          </div>
          <div class="modal-body">
            <b>Details</b>
            <hr></hr>
            Address: <?php echo $ser['fam_add']; ?><p></p>
            Phone_num: <?php echo $ser['fam_phone']; ?><p></p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
    </form>
</td>
</tr>
<?php
}
?>
</tbody>

推荐答案

<tbody>
<?php
$counter = 1;
$data = "SELECT * FROM family"; 
$result = $conn->query($data);                          
while($ser=mysqli_fetch_array($result)) 
{
?>  
<tr>
    <td><center><?php echo $counter; $counter++; ?></center></td>
    <td><center><?php echo $ser['fam_id'];?></center></td>
    <td><center><?php echo $ser['fam_name']; ?></center></td>

    <td>
        <center>
            <a class="modalLink" href="#myModal" data-toggle="modal" data-target="#myModal" data-id="<?php echo $ser["fam_id"]; ?>" data-addr="<?php echo $ser['fam_add']; ?>" data-phone="<?php echo $ser['fam_phone']; ?>" data-name="<?php echo $ser['fam_name']; ?>">
              <button class="btn btn-primary btn-sm">
                Edit Attendance Status
              </button>
            </a>
        </center>

将此代码放在 footer.php 或本页末尾.

Place this code in footer.php or end of this page.

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">

        </div>
    </div>
</div>

通过 ajax 调用您的somepage.php"(单独的页面.存在模态体的位置).将此 <script></script> 放入您的 JS 文件中.

Call your 'somepage.php' (Separate page.Where modal-body is present) through ajax. Place this <script></script> in your JS file.

<script>
$('.modalLink').click(function(){
    var famID=$(this).attr('data-id');
    var famAddr=$(this).attr('data-addr');
    var famPhone=$(this).attr('data-phone');
    var famName=$(this).attr('data-name');

    $.ajax({url:"somepage.php?famID="+famID+"&famAddr="+famAddr+"&famPhone="+famPhone+"&famName="+famName,cache:false,success:function(result){
        $(".modal-content").html(result);
    }});
});
</script>

somepage.php创建 somepage.php (如果要更改此页面名称.在 <script></script> 中也进行更改.两者都是相关的.)

somepage.php Create somepage.php (If you want to change this page name. Change in <script></script> too. Both are related.)

<?
$famID=$_GET['famID'];
$famAddr=$_GET['famAddr'];
$famPhone=$_GET['famPhone'];
$famName=$_GET['famName'];

?>

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
    <h4 class="modal-title" id="fam_id">Name <?php echo $famName;?></h4>
</div>
<div class="modal-body">
    <form id="form1" method="post">
        <b>Details</b>
        <hr></hr>
        Address: <p><?php echo $famAddr;?></p>
        Phone_num: <p><?php echo $famPhone;?></p>
    </form>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

相关文章