send a value in bootstrap modal from php

Question

<a id="modal-107547" href="#modal-container-107547" class="btn btn-default btn-flat" data-toggle="modal">Profile</a>

This button links to a bootstrap modal as below.

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
             <a id="modal-107547" href="#modal-container-107547" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

            <div class="modal fade" id="modal-container-107547" 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" aria-hidden="true">
                                ×
                            </button>
                            <h4 class="modal-title" id="myModalLabel">
                                Modal title
                            </h4>
                        </div>
                        <div class="modal-body">
                            ...
                        </div>
                        <div class="modal-footer">

                            <button type="button" class="btn btn-default" data-dismiss="modal">
                                Close
                            </button> 
                            <button type="button" class="btn btn-primary">
                                Save changes
                            </button>
                        </div>
                    </div>

                </div>

            </div>

        </div>
    </div>
</div>

Is there any method to send a value to the model when I clicked the profile button like we used something.php?id="value" in get method.

score 1 · Accepted Answer · answered May 29 '16 at 09:01

Make a php page that will return profile

getprofile.php

$id = $_GET['id'];
return getProfile($id); // return all info for this profile id

Use ajax to send id to to getprofile.php, you modal identifier should be #modal-profileID

$("a[id^=modal-]").on("click",function(e) {
e.preventDefault();
$.get( "getprofile.php", { id: $(this).prop("id").split("-")[1] } ).done(function( data ) {
    $("#modal-container-"+$(this).prop("id").split("-")[1]).find(".modal-body").append(data);
    $("#modal-container-"+$(this).prop("id").split("-")[1]).modal();
  });
});

Your <a> tag could be written using data-target

<a id="modal-107547" data-target="#modal-container-107547" class="btn btn-default btn-flat" data-toggle="modal">Profile</a>

score 0 · Answer 2 · edited May 23 '17 at 12:07

The button does not submit a form, nor link to another page. The modal is opened with JavaScript on clicking the button. So, there is no opportunity for PHP to get involved in the communication between the two (unless you were to use AJAX, which it seems would be an unnecessarily long way of doing what you're trying to accomplish).

You would have to pass values, between the button and the modal, with JavaScript/jQuery.

The acutual values to be sent, though, can be inserted in PHP (on generating the HTML for the button and the modal). Something like this:

echo '<a id="modal-107547" href="#modal-container-107547" class="btn btn-default btn-flat" data-toggle="modal" data-some-variable='. $variable .'>Profile</a>'

You would then use JS/JQuery to do something when the button is clicked.

EDIT: if you need a hand with the JS/jQuery, see this question and answers:

Passing data to a bootstrap modal

send a value in bootstrap modal from php

2 Answers2