Home  >  Article  >  Backend Development  >  How can I pass $_GET variables from a link to a Bootstrap modal?

How can I pass $_GET variables from a link to a Bootstrap modal?

Linda Hamilton
Linda HamiltonOriginal
2024-11-13 08:40:02933browse

How can I pass $_GET variables from a link to a Bootstrap modal?

Passing $_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:

Simple Solution

  1. Modal Call Button:

    <td>
  2. 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">
  3. 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">&times;</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>

Alternate Solution with Ajax

  1. Modal Call Button (with data attribute):

    <td>
  2. Modal HTML:

    <div class="modal fade">
  3. 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
          }
        });
      });
    });
  4. 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
    }
    ?>

Additional Notes

  • To eliminate the need for a separate script to clear data from the modal, you can use $('#editBox').on('hidden.bs.modal', function () { $(this).removeData('bs.modal'); });
  • Another option is to use jQuery's click function with $('.open-modal').click(function(){ ... });, where open-modal is a custom class added to the modal call button.
  • You can also pass on-page information to the modal using data attributes and handle it using the bootstrap modal event.

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn