点击php-mysql按钮后,在模式弹出窗口上显示基于所选id的数据
Show data based of selected id on modal popup window after click a button php mysql
在我的网站上,当点击按钮时,它会提示弹出窗口。我正在使用模式弹出窗口。我的问题是,我无法获得基于按钮id检索的正确数据。以下是我的代码:html表格:
<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
是主键。
然后,下面是模式弹出窗口的代码
<!-- 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">×</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>
此外,我把它们放在一个文件里。总之,如下所示:
<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">×</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或此页面的末尾。
<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文件中。
<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>
中更改。两者都是相关的。)
<?
$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">×</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>
相关文章:
- 使文本框显示在所选单选按钮旁边
- jquery下拉菜单修改所选文本,但在后续单击时显示先前所选文本的原始值
- 将特殊效果应用于所选滤镜
- 隐藏/显示基于所选单选按钮的表 TR - jquery
- 仅显示属于所选商店模型 Ruby 的分类
- 如何获取上一个/下一个非禁用选项的索引(相对于所选选项)
- 如何显示与所选数字对应的多个表单字段
- Angular js显示基于所选项目和url路径的名称
- PHP jQuery显示基于所选组合框的数据
- React JS在文本字段中显示参与者所选ID的所有数据
- 点击php-mysql按钮后,在模式弹出窗口上显示基于所选id的数据
- 显示基于所选单选按钮的面板
- 更改文本以在选择中显示当前所选项目
- 在HTML中显示基于所选类别的图像
- 将功能应用于所选文本
- 我正在尝试显示由所选单选按钮决定的图像
- 显示基于所选单选按钮的详细信息
- 如何显示特定于所选下拉选项的项
- 刷新页面后无法显示基于所选选项的表单
- 如何显示特定于所选下拉选项的文本块