Vinay
Reputation: 11
Passing PHP Values to Bootstrap 3 Modal
I am trying to pass PHP values from the DB to a bootstrap modal which is a form that posts to some other page, I think I am close but i can't figure out why the bootstrap modal -text box won't the values from PHP, I followed Ashish's article and got very close, but just not able to get the values to the bootstrap modal.
Thanks in advance.
Below is the HTML and the PHP part of the code.
<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>
This is the jQuery code:
<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>
Upvotes: 1
Views: 3924
Answers (2)
Imran
Reputation: 504
Change your Php code to this
<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 script to
$(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();
};
})
Upvotes: 1
user2907072
Reputation: 11
try the below code, I did not test it but might give you idea.
<!-- 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>
Upvotes: 1
Related Questions
- Pass PHP variable to bootstrap modal
- Pass Values to Bootstrap Modal JavaScript and PHP
- Passing data via Modal Bootstrap and getting php variable?
- Passing Jquery variable to php within a modal
- Passing a PHP value to a twitter bootstrap modal
- passing a php variable dynamically to a bootstrap modal
- How to assign the value passed to a bootstrap modal dialogue to php variable?
- Pass value from a href inside a bootstrap modal using php
- pass multiple variable to bootstrap modal
- How to pass a value to PHP variable from twitter bootstrap modal?