How to send vaiable to a Bootstrap modal

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">&times;</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?

You have `button` and `modal` in same page? If not on what instance the page opens this `modal`? — Guruprasad J Rao, Feb 18 '16 at 10:28
@GuruprasadRao, Sorry, I forgot to mention that the button is in one file and the modal code is in another file, hence the problem. I updated the OP with this info. — PoorCadaver, Feb 18 '16 at 10:35
Like see.. `onclick` of button are you redirecting from `index.php` to `modal.php`? — Guruprasad J Rao, Feb 18 '16 at 10:36
Hi @PoorCadaver: You didn't responded to answer. Whether it works or not ? — Nana Partykar, Feb 19 '16 at 16:59

score 0 · Answer 1 · answered Feb 18 '16 at 10:29

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>

Nikhil Nanjappa · Answer 2 · 2016-02-18T11:01:29.000

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">&times;</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'
});

So I send the variable with data-id? Do I have to put my modal html inside of the javascript code (where you have printed alert() )? — PoorCadaver, Feb 18 '16 at 10:45
No you can keep the modal where it already is. let me update the answer to clear your doubts. — Nikhil Nanjappa, Feb 18 '16 at 10:57

score 0 · Accepted Answer · edited May 23 '17 at 12:31

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">&times;</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 send vaiable to a Bootstrap modal

3 Answers3