How to Pass $_GET Variables to a Bootstrap Modal?

Patricia Arquette
Release: 2024-11-11 22:32:02
Original
858 people have browsed it

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>
    Copy after login
  • Modal HTML:

    <div class="modal fade">
    Copy after login
    Copy after login
    Copy after login
  • file.php

    $Id = $_GET["id"]; // Escape the string if needed
    // Run query to fetch records against $Id
    // Show records in modal body
    Copy after login

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>
    Copy after login
  • Modal HTML:

    <div class="modal fade">
    Copy after login
    Copy after login
    Copy after login
  • 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
        }
      });
    });
    });
    Copy after login
  • file.php

    if ($_POST['id']) {
    $id = $_POST['id'];
    // Run query to fetch records
    // Echo the data to be displayed in the modal
    }
    Copy after login
    Copy after login

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="">
    Copy after login
  • Modal HTML:

    <div class="modal fade">
    Copy after login
    Copy after login
    Copy after login
  • 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);
        }
      });
    });
    });
    Copy after login
  • file.php

    if ($_POST['id']) {
    $id = $_POST['id'];
    // Run query to fetch records
    // Echo the data to be displayed in the modal
    }
    Copy after login
    Copy after login

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>
    Copy after login
  • 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
    });
    });
    Copy after login

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!

source:php.cn
Statement of this Website
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
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template