How to Pass $_Get Variables from a Link to a Bootstrapmodal

How to pass $_GET variables from a link to a bootstrapmodal?

The simple solution to pass id, fetch records from database against passed id and show in modal is;

---

Simple Solution

Modal Call button

<td><span data-placement="top" data-toggle="tooltip" title="Show"><a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editBox" href="file.php?id=<?php echo $obj->id;?>"><span class="glyphicon glyphicon-pencil"></span></a></span></td>

Modal HTML

Put following modal HTML outside the while loop in page where the above call button is located (preferable at bottom of page)

<div class="modal fade" id="editBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
          //Content Will show Here
        </div>
    </div>
</div>

Now Create a PHP file and name it file.php

This file is called with modal call button href="file.php?id=<?php echo $obj->id;?>"

<?php
//Include database connection here
$Id = $_GET["id"]; //escape the string if you like
// Run the Query
?>
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h4 class="modal-title"><center>Heading</center></h4>
</div>
<div class="modal-body">
    //Show records fetched from database against $Id
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default">Submit</button>
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

To remove the data inside modal or in other words to refresh the modal when open next records without page refresh, use following script

Put it after jQuery and Bootstrap library (Remember jQuery & Bootstrap libraries always come first)

<script>
$( document ).ready(function() {
    $('#editBox').on('hidden.bs.modal', function () {
          $(this).removeData('bs.modal');
    });
});
</script>

---

Alternate Solution with Ajax and Bootstrap Modal Event Listener

In Modal Call button replace href="file.php?id=<?php echo $obj->id;?> with data attribute data-id="<?php echo $obj->id;?>" so we pass the id of row to modal using bootstrap modal event

<td><span data-placement="top" data-toggle="tooltip" title="Show"><a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editBox" data-id="<?php echo $obj->id;?>"><span class="glyphicon glyphicon-pencil"></span></a></span></td>

Modal HTML

Put following modal HTML outside the while loop in page where the above call button is located (preferable at bottom of page)

<div class="modal fade" id="editBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4 class="modal-title"><center>Heading</center></h4>
            </div>
            <div class="modal-body">
                <div class="form-data"></div> //Here Will show the Data
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default">Submit</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Now Add following script in same page;

<script>
//jQuery Library Comes First
//Bootstrap Library
$( document ).ready(function() {       
    $('#myModal').on('show.bs.modal', function (e) { //Modal Event
        var id = $(e.relatedTarget).data('id'); //Fetch id from modal trigger button
    $.ajax({
      type : 'post',
       url : 'file.php', //Here you will fetch records 
      data :  'post_id='+ id, //Pass $id
      success : function(data){
         $('.form-data').html(data);//Show fetched data from database
       }
    });
    });
});
</script>

Now Create a PHP file and name it file.php (same as use in Ajax Method)

<?php
//Include database connection here
if($_POST['id']) {
    $id = $_POST['id'];
    // Run the Query
    // Fetch Records
    // Echo the data you want to show in modal
 }
?>

In this solution, you don't need following script to remove the data inside modal or in other words to refresh the modal

$('#editBox').on('hidden.bs.modal', function () {
      $(this).removeData('bs.modal');
});

---

Alternate Solution with Ajax and jQuery Click function

Modal Call button

<td><span data-placement="top" data-toggle="tooltip" title="Show"><a class="btn btn-primary btn-xs" class="open-modal" href="" id="<?php echo $obj->id;?>"><span class="glyphicon glyphicon-pencil"></span></a></span></td>

Put following modal HTML in page where above modal call button located (preferable at bottom of page)

<div class="modal fade" id="editBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <div class="form-data"></div> //Here Will show the Data
            </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>

following Ajax method code in same page where Modal HTML & Modal call button located.

<script>
//jQuery Library Comes First
//Bootstrap Library
$( document ).ready(function() { 
  $('.open-modal').click(function(){
    var id = $(this).attr('id');
    $.ajax({
      type : 'post',
       url : 'file.php', //Here you should run query to fetch records
      data : 'post_id='+ id, //Here pass id via 
      success : function(data){
          $('#editBox').show('show'); //Show Modal
          $('.form-data').html(data); //Show Data
       }
    });
  });
});
</script>

And the PHP file file.php will be same as the above solution with bootstrap modal event

---

Pass On page information to Modal

In some cases, only need to pass (display) minimal information to modal which already available on page, can be done with just bootstrap modal event without Ajax Method with data-attributes

<td>
  <span data-placement="top" data-toggle="tooltip" title="Show">
    <a data-book-id="<?php echo $obj->id;?>" data-name="<?php echo $obj->name;?>" data-email="<?php echo $obj->email;?>" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editBox">
    <span class="glyphicon glyphicon-pencil"></span>
    </a>
  </span>
</td>

Modal Event

$(document).ready(function(){
    $('#editBox').on('show.bs.modal', function (e) {
        var bookid = $(e.relatedTarget).data('book-id');
        var name = $(e.relatedTarget).data('name');
        var email = $(e.relatedTarget).data('email');
        //Can pass as many onpage values or information to modal  
     });
});

How to pass a GET variable in Bootstrap Modal?

Bootstrap modal href is not calling your page when you click. Your page is already loaded when you include userDetails.php. So you can define the get before the include or pass the user id through GET variable.

So:

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal-user" aria-hidden="true" id="modal-user">
    <div class="modal-dialog modal-lg">

        <?php
            $_GET['id_user'] = $rel['id_user'];
            include('userDetails.php');
        ?>

    </div>
</div>

In a LOOP

If you have a loop and want to do it dynamically through the jQuery you can do the following:

Remove the bootstrap calls from your link, and add a trigger class modal-btn and make it like:

<a 
    class="btn btn-primary modal-btn btn-xs"
    href="userDetails.php?id_user=<?= $rel['id_user'] ;?>"><?= $rel['id_user'] ;?>
</a>

Update your modal structure and remove the include():

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal-user" aria-hidden="true" id="modal-user"> 
  <div class="modal-dialog modal-lg">   
    <div class="modal-content"></div>    
  </div> 
</div>

The jQuery should get the href property of the link and call the bootstrap modal function load and also force the modal to show

$(".modal-btn").on('click',function(e){ //trigger when link clicked
   e.preventDefault(); 
   $('#modal-user').modal('show'); //force modal to show
   $('.modal-content').load( $(this).attr('href')); //load content from link's href
});

So your page userDetails.php will be loaded inside the modal, and you will need to remove the <div class="modal-content">...</div> from it to avoid duplication...

How to pass value into href link of a Bootstrap Modal?

Use the following lines of code inside your script tag and this should work fine.

$('#scrapModal .btn-danger').on('click', function (e) {
  e.preventDefault()
  alert(e.target.pathname + e.target.search)
})

PHP : How to put and pass variable in modal URL

Put a hidden input field with the user_id into your form:

<input type="hidden" name="user_id" value="<?php echo $user['user_id']; ?>">

---

EDIT: If you mean Bootstrap try this:

Link/Button:

<a data-toggle="modal" data-userid="<?php echo $user['user_id']; ?>"
   href="main_user.php#myModal" 
   class="btn btn-warning">

Hidden Form Field:

<input type="hidden" name="user_id" value="">

Javascript:

$('#myModal').on('show.bs.modal', function(e) {
    var userid = $(e.relatedTarget).data('userid');
    $(e.currentTarget).find('input[name="user_id"]').val(userid);
});

See also http://getbootstrap.com/javascript/#modals-related-target and Passing data to a bootstrap modal

You should have mentioned Bootstrap in your question. PHP is not the appropriate tag.

Passing data to a bootstrap modal

I think you can make this work using jQuery's .on event handler.

Here's a fiddle you can test; just make sure to expand the HTML frame in the fiddle as much as possible so you can view the modal.

http://jsfiddle.net/8c05pn1f/

HTML

<p>Link 1</p>
<a data-toggle="modal" data-id="ISBN564541" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>

<p> </p>


<p>Link 2</p>
<a data-toggle="modal" data-id="ISBN-001122" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>
    
<div class="modal hide" id="addBookDialog">
 <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
    <div class="modal-body">
        <p>some content</p>
        <input type="text" name="bookId" id="bookId" value=""/>
    </div>
</div>

JAVASCRIPT

$(document).on("click", ".open-AddBookDialog", function () {
     var myBookId = $(this).data('id');
     $(".modal-body #bookId").val( myBookId );
     // As pointed out in comments, 
     // it is unnecessary to have to manually call the modal.
     // $('#addBookDialog').modal('show');
});

Pass Variable To Simple Modal Popup From URL

Use a data attribute:

<a href="?pmntid=<?php echo $row[0] ?>" data-rid="<?php echo $row[0] ?>" class="pmntDetail"><?php echo $row[20] ?></a>

and read it in the click event

var pmntid = $(this).data("rid");
console.log("ID: ", pmntid);

How to pass a parameter from a link element to a modal window?

Use the .relatedTarget property mentioned in the Modal Event docs:

$(document).ready(function () {
    $('#remoteModal').on('show.bs.modal', function (event) {
        console.log($(event.relatedTarget).attr('data-id'));
    });
});

Bootstrap modal and passing value

Create a class Edit in <a></a> tag. Use this class to call modal. And, add data-Id="<?echo $row['id'];?>"

<tr>        
    <td><?php echo $row['name']; ?></td>   
    <td>
        <a class='Edit' data-toggle="modal" href="#form_modal" data-target="#myModal" data-Id="<?php echo $row['id'];?>">Edit</a>
    </td>          
</tr>

Place this code in footer

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

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

JS

<script>
$('.Edit').click(function(){
    var Id=$(this).attr('data-Id');
    $.ajax({url:"SomePage.php?Id="+Id,cache:false,success:function(result){
        $(".modal-content").html(result);
    }});
});
</script>

Create somepage.php (If you want to change this page name. Change in <script></script> too. Both are related.)

SomePage.php

<?php
$Id=$_GET['Id'];
?>

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
    <h4 class="modal-title" id="fam_id"></h4>
</div>
<div class="modal-body">
    <?php echo $Id;?>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

For more info, click Show data based of selected id on modal popup

---

Related Topics