Home  >  Article  >  Backend Development  >  How to Pass $_GET Variables to a Bootstrap Modal?

How to Pass $_GET Variables to a Bootstrap Modal?

Patricia Arquette
Patricia ArquetteOriginal
2024-11-11 22:32:02821browse

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!

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