Home > Article > Backend Development > How can I pass $_GET variables from a link to a Bootstrap modal?
In web development, it's often necessary to pass data from a link to a modal window. To achieve this using $_GET variables in Bootstrap, follow these steps:
Modal Call Button:
<td>
Modal HTML:
Place the following modal HTML outside the while loop on the page where the call button is located (preferably at the bottom):
<div class="modal fade">
file.php:
<?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>
Modal Call Button (with data attribute):
<td>
Modal HTML:
<div class="modal fade">
JavaScript (with jQuery):
// jQuery library comes first // Bootstrap library $(document).ready(function() { $('#editBox').on('show.bs.modal', function(e) { 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 } }); }); });
file.php:
<?php // Include database connection here if ($_POST['id']) { $id = $_POST['id']; // Run the query // Fetch records // Echo the data you want to show in the modal } ?>
By using these techniques, you can effectively pass $_GET variables from a link to a Bootstrap modal, allowing you to display dynamic content in your web applications.
The above is the detailed content of How can I pass $_GET variables from a link to a Bootstrap modal?. For more information, please follow other related articles on the PHP Chinese website!