我正在尝试将PHP值从DB传递到bootstrap模式，这是一个发布到其他页面的表单，我想我很接近，但我无法弄清楚为什么bootstrap modal -text框不会来自PHP的值，我跟随Ashish的文章并且非常接近，但是无法将值传递给bootstrap模式。
提前致谢。
以下是代码的HTML和PHP部分。
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered datatables" id="example">
<thead>
<tr>
<th>Sr.No</th>
<th>Customer Name</th>
<th>Email</th>
<th>Cell</th>
<th>Appointment On</th>
<th>Modify Status</th>
<th colspan="2">Actions</th>
</tr>
</thead>
<tbody>
<?php while($row=mysql_fetch_array($getenqs))
{
echo '<tr>';
echo '<td>'.$cnt.'</td>';
echo '<td>'.$row['custname'].'</td>';
echo '<td>'.$row['custemail'].'</td>';
echo '<td>'.$row['custcell'].'</td>';
echo '<td>'.datemaker($row['enq_date']).'</td>';
echo '<td align="center"><a data-toggle="modal" data-enid'.$cnt.'="'.$row['id'].'" href="#addappModal'.$cnt.'" class="caddappModal'.$cnt.'"><i class="fa fa-calendar showgreen"></i></a></td>';
echo '<td align="center"><a data-toggle="modal" href="#modstatModal"><i class="fa fa-pencil showgreen"></i></a></td>';
echo'<td align="center"><a class="tooltips" data-toggle="tooltip" data-placement="left" title="Add as a Member" href="ajax/add-as-member?enqid='.$row['id'].'"><i class="fa fa-share showgreen"></i></a>';
echo'<td align="center"><a class="tooltips" data-toggle="tooltip" data-placement="left" title="Hide this enquiry" href="ajax/hide-enquiry?enqid='.$row['id'].'"><i class="fa fa-minus-circle showgreen"></i></a>';
echo '</tr>';
?>
<!-- Modal to Add Appointments-->
<form action="addapp" class="form-horizontal row-border" data-validate="parsley" id="validate-form">
<div class="modal fade" id="addappModal<?php echo $cnt;?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header panel-green">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Add an Appointment for <?php echo $row['custname']; ?></h4>
</div>
<div class="modal-body" id="addapp" >
<div class="form-group">
<label class="col-sm-3 control-label">Required Field</label>
<div class="col-sm-6">
<input type="text" required="required" class="form-control" id="datepicker">
<input type="text" name="enid" id="fenid<?php echo $cnt;?>">
</div>
</div>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<div class="btn-toolbar">
<button class="btn-green btn" id="demoskylo" onclick="javascript:$('#validate-form').parsley( 'validate' );"> Add Appointment</button>
</div>
</div>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
</form><!-- /.modal to add appointments ends-->
<?php
$cnt++; } ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
这是jQuery代码：
<script>
$(document).ready(function(){
for(var i=1; i<=<?php echo $cnt;?>; i++) {
$('a.caddappModal'+i).click(function(){
var enid = $(this).data('enid'+i);
$('#fenid'+i).val(enid);
});
}
});
</script>
答案 0 :(得分：1)
尝试下面的代码，我没有测试它，但可能会给你一些想法。
<!-- Modal to Add Appointments-->
<form action="addapp" class="form-horizontal row-border" data-validate="parsley" id="validate-form">
<div class="modal fade" id="addappModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header panel-green">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Add an Appointment for <?php echo $row['custname']; ?></h4>
</div>
<div class="modal-body" id="addapp" >
<div class="form-group">
<label class="col-sm-3 control-label">Required Field</label>
<div class="col-sm-6">
<input type="text" required="required" class="form-control" id="datepicker">
<input type="text" name="enid" id="id" value="">
</div>
</div>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<div class="btn-toolbar">
<button class="btn-green btn" id="demoskylo" onclick="javascript:$('#validate-form').parsley( 'validate' );"> Add Appointment</button>
</div>
</div>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
</form><!-- /.modal to add appointments ends-->
<script type="text/javascript">
$(document).on("click", ".caddappModal", function () {
var pId = $(this).data('enid');
$(".modal-body #id").val( pId );
});</script>
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered datatables" id="example">
<thead>
<tr>
<th>Sr.No</th>
<th>Customer Name</th>
<th>Email</th>
<th>Cell</th>
<th>Appointment On</th>
<th>Modify Status</th>
<th colspan="2">Actions</th>
</tr>
</thead>
<tbody>
<?php while($row=mysql_fetch_array($getenqs))
{
echo '<tr>';
echo '<td>'.$cnt.'</td>';
echo '<td>'.$row['custname'].'</td>';
echo '<td>'.$row['custemail'].'</td>';
echo '<td>'.$row['custcell'].'</td>';
echo '<td>'.datemaker($row['enq_date']).'</td>';
echo '<td align="center"><a data-toggle="modal" data-enid="'.$row['id'].'" href="#addappModal" class="caddappModal"><i class="fa fa-calendar showgreen"></i></a></td>';
echo '<td align="center"><a data-toggle="modal" href="#modstatModal"><i class="fa fa-pencil showgreen"></i></a></td>';
echo'<td align="center"><a class="tooltips" data-toggle="tooltip" data-placement="left" title="Add as a Member" href="ajax/add-as-member?enqid='.$row['id'].'"><i class="fa fa-share showgreen"></i></a>';
echo'<td align="center"><a class="tooltips" data-toggle="tooltip" data-placement="left" title="Hide this enquiry" href="ajax/hide-enquiry?enqid='.$row['id'].'"><i class="fa fa-minus-circle showgreen"></i></a>';
echo '</tr>';
$cnt++; } ?>
</tbody>
</table>
答案 1 :(得分：1)
将您的Php代码更改为此
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered datatables" id="example">
<thead>
<tr>
<th>Sr.No</th>
<th>Customer Name</th>
<th>Email</th>
<th>Cell</th>
<th>Appointment On</th>
<th>Modify Status</th>
<th colspan="2">Actions</th>
</tr>
</thead>
<tbody>
<?php while($row=mysql_fetch_array($getenqs))
{
echo '<tr>';
echo '<td>'.$cnt.'</td>';
echo '<td>'.$row['custname'].'</td>';
echo '<td>'.$row['custemail'].'</td>';
echo '<td>'.$row['custcell'].'</td>';
echo '<td>'.datemaker($row['enq_date']).'</td>';
echo '<td align="center">
<a class="launchModal" data-enid="'.$row['id'].'" data-cn="'.$row['custname'].'" href="#addappModal" class="caddappModal"><i class="fa fa-calendar showgreen"></i></a></td>';
echo '<td align="center"><a data-toggle="modal" href="#modstatModal"><i class="fa fa-pencil showgreen"></i></a></td>';
echo'<td align="center"><a class="tooltips" data-toggle="tooltip" data-placement="left" title="Add as a Member" href="ajax/add-as-member?enqid='.$row['id'].'"><i class="fa fa-share showgreen"></i></a>';
echo'<td align="center"><a class="tooltips" data-toggle="tooltip" data-placement="left" title="Hide this enquiry" href="ajax/hide-enquiry?enqid='.$row['id'].'"><i class="fa fa-minus-circle showgreen"></i></a>';
echo '</tr>';
<?php
} ?>
</tbody>
</table>
<form action="addapp" class="form-horizontal row-border" data-validate="parsley" id="validate-form">
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header panel-green">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Add an Appointment for <span id="cn"></span></h4>
</div>
<div class="modal-body" id="addapp" >
<div class="form-group">
<label class="col-sm-3 control-label">Required Field</label>
<div class="col-sm-6" >
<input type="text" required="required" class="form-control" id="datepicker">
<div id="FormCon"></div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<div class="btn-toolbar">
<button class="btn-green btn" id="demoskylo" onclick="javascript:$('#validate-form').parsley( 'validate' );"> Add Appointment</button>
</div>
</div>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
</form>
Java脚本
$(function(){
$('.launchModal').click(function(e){
e.preventDefault();
var enid = $(this).data('enid');
$('#FormCon').html('<input type="text" name="enid" value="'+enid+'" />');
$('#cn').html($(this).data('cn'));
$('.modal').modal();
};
})