Home > Article > Backend Development > How to Pass $_GET Variables to a Bootstrap Modal?
How to Pass $_GET Variables from a Link to a Bootstrap Modal
Passing $_GET variables from a link to a Bootstrap modal is essential for modifying and displaying specific data within a modal. Here are several solutions to achieve this:
Simple Solution
Modal Call Button:
<td 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> </td>
Modal HTML:
<div class="modal fade">
file.php
$Id = $_GET["id"]; // Escape the string if needed // Run query to fetch records against $Id // Show records in modal body
Alternate Solution with Ajax and Bootstrap Modal Event Listener
Modal Call Button:
<td 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> </td>
Modal HTML:
<div class="modal fade">
Script:
$( document ).ready(function() { $('#myModal').on('show.bs.modal', function (e) { var id = $(e.relatedTarget).data('id'); $.ajax({ type : 'post', url : 'file.php', // Fetches records data : 'post_id='+ id, success : function(data) { $('.form-data').html(data); // Shows fetched data in modal body } }); }); });
file.php
if ($_POST['id']) { $id = $_POST['id']; // Run query to fetch records // Echo the data to be displayed in the modal }
Alternate Solution with Ajax and jQuery Click Function
Modal Call Button:
<td data-placement="top" data-toggle="tooltip" title="Show"> <a class="btn btn-primary btn-xs open-modal" href="">
Modal HTML:
<div class="modal fade">
Script:
$( document ).ready(function() { $('.open-modal').click(function(){ var id = $(this).attr('id'); $.ajax({ type : 'post', url : 'file.php', // Fetches records data : 'post_id='+ id, success : function(data) { $('#editBox').show('show'); $('.form-data').html(data); } }); }); });
file.php
if ($_POST['id']) { $id = $_POST['id']; // Run query to fetch records // Echo the data to be displayed in the modal }
Pass On-Page Information to Modal
Modal Call Button:
<td 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> </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 on-page values to modal }); });
By implementing one of these solutions, you can effectively pass $_GET variables from a link to a Bootstrap modal, allowing you to load and manipulate data dynamically within a modal window.
The above is the detailed content of How to Pass $_GET Variables to a Bootstrap Modal?. For more information, please follow other related articles on the PHP Chinese website!