How to send vaiable to a Bootstrap modal - php

Question

I have a PHP website and am using Bootstrap for the framework. When I hit a button a modal opens to show some info. I would like to know how to send a variable to this modal from the previous page.
The button is in index.php and the modal code is in modals.php.
This is the modal code:
index.php
require("modals.php");
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
modals.php
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
What I'm looking for is something like you would do with a url: <button data-target="myModal&id=1"> and then pick it up with $varId = $_GET['id'] inside the modal.
Is there a way?

Answer 1

index.php (Give class name openModal button, which is used in <script></script>. Give data-id attribute, pass value to it.)
<?php require("modals.php");?>
<button type="button" class="openModal btn btn-info btn-lg" data-toggle="modal" data-id='1' data-target="#myModal">Open Modal</button>
Place this code somewhere in same page.
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
JS (fetch data-id from Open Modal button. and, pass it to ajax_modal.php page)
<script>
$('.openModal').click(function(){
var id = $(this).attr('data-id');
$.ajax({url:"ajax_modal.php?id="+id,cache:false,success:function(result){
$(".modal-content").html(result);
}});
});
</script>
ajax_modal.php (If you are looking to change this page name. Change in <script></script> tag too. Both are related.)
<?php
$id = $_GET['id'];
?>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Your Id : <?echo $id;?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
For more info, click here
how-to-pass-current-row-value-in-modal
passing-data-via-modal-bootstrap-and-getting-php-variable
bootstrap-modal-and-passing-value
show-data-based-of-selected-id-on-modal-popup-window-after-click-a-button-php-my
passing-data-from-page-to-bootstrap-modal-using-sql-php

Answer 2

If you are passing something from a previous page set the variable in the query string of the url. You can then get the variable from the url query string using $_GET
e.g.
<?php $myVar = $_GET["my value"]; ?>
<div class="modal-body">
<p><?php echo $myVar; ?></p>
</div>

Answer 3

Or you could just use pure javascript like so.(No PHP)
HTML:
<button data-id="myModal1" data-target="#myModal" class="myModalClass">
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some input text where you want to show the passed value.</p>
<input type="hidden" name="myValue" id="myValue" value=""/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
and get the value using javascript
$(document).on("click", ".myModalClass", function () {
var myValue = $(this).data('id');
$(".modal-body #myValue").val( myValue ); // myValue has the value 'myModal1'
});