How to Pass Id from Modal in Boostrap to PHP File

php bootstrap modal pass id user

If you want to open the modal on the current page, you can do something like this:

 <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#modal-<?php echo $row['id_user']; ?>">Open modal</a>

and the modal should look like this:

<div class="modal-content" id="modal-<?php echo $row['id_user']; ?>">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h4 class="modal-title">Modal Header</h4>
  </div>
  <div class="modal-body">
    <p>Some text in the modal.</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>

With the official bootstrap modal example:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal-<?php echo $row['id_user']; ?>">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal-<?php echo $row['id_user']; ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel-<?php echo $row['id_user']; ?>" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel-<?php echo $row['id_user']; ?>">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Bootstrap modal passing ID

If your not using <form> then your <a href="approve.php?id=<?php echo $id;?>"></a> is correct so your approve.php has something wrong.

<?php
include("db/database_configuration.php");

$alum_id=$_GET['id'];
mysqli_query($conn, "UPDATE tblalumni SET alum_status = '2' WHERE  alum_id = '$alum_id'") or die (mysqli_error());
header('location:confirm_alumni.php')

?>

Try this

How do i pass the ID of a row from my database to a modal dialog?

I had this same problem and I had tried jQuery dialog, many known and unknown popup plugins even paid one from codecanyon but nothing worked out of the box like bootstrap modal, with every popup plugin had to write custom code to work inside PHP while loop and then next problem is refresh the modal with new content without refreshing the page.

My approach with bootstrap modal is that i created a separate php file in your case reservation-profile.php and add the file in href link with id and call the popup modal.

<?php
    $result = mysqli_query($con,"SELECT * FROM general_reservation ");
    $count = mysqli_num_rows($result);
    echo "<b><center><h3>Cars Reserved By Districts</h3></center></b><br><br>";

    while($row=mysqli_fetch_array($result)){
        $reservation_id = $row['reservation_id'];
    ?>

    <tr><td>
     <a data-toggle="modal" href="reservation-profile.php?id=<?php echo $reservation_id;?>" data-target="#myModal" class="btn btn-link">Reserver's Profile</a>
    </td></tr>

<?php
    //$reserver = $row['reservation_id']; //Don't Need this
    } //end of while loop
?>

//Bootstrap Modal
<div class="modal fade" id="myModal">
     <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <strong>Loading...</strong>
        </div>
    </div>
</div>

Now create a reservation-profile.php file like this

<?php
//Include database connection here
$reserver = $_GET["id"]; //escape the string if you like
$result = mysqli_query($con,"SELECT * FROM general_reservation WHERE reservation_id = '$reserver' ");
//$count = mysqli_num_rows($result); //Don't need to count the rows too
$row = mysqli_fetch_array($result); //Don't need the loop if you wana fetch only single row against id
?>
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h4 class="modal-title"><center>Reserver</center></h4>
</div>
<div class="modal-body">
    <p ><strong>First Name: </strong><?php echo $row['fname'];?> </p><br>
    <p ><strong>Last Name: </strong><?php echo $row['lname'];?></p><br>
    <p ><strong>Mobile Number: </strong><?php echo $row['mobile_number'];?></p>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

The last and most important part is to refresh the modal with new detail without page refresh.

Following piece of code do the job. you can read more about it here

Note: Add following code to the page from where you are calling the modal. Do not add this in reservation-profile.php

//First jQuery Library
//Bootstrap Library
<script>
$( document ).ready(function() {
    $('#myModal').on('hidden.bs.modal', function () {
          $(this).removeData('bs.modal');
    });
});
</script>

So this whole solution works out of the box no need to write any additional lines of code.

pass var to bootstrap modal where php will use this value

In order for HTML/javascript to pass information to PHP, you should use AJAX. Here's how it works:

html - browser-side - displays the page elements and values

javascript - browser-side - detects user events (button clicks, dropdown choices) and (once an event happens) can run bits of code to do stuff

PHP - server-side - initially sends the page content (HTML/javascript/CSS code) to the browser, and can store stuff in databases, etc)

AJAX - a method of using javascript to communicate with PHP, in order to interact with a database or do other back-end things. Via ajax, js code can send information to a back-end php file, get it to look something up (for example) and send back some data, then the js (still running) can update the page.

But you cannot just send something to PHP... as if there was a natural connection between the two. You need to write a process, usually involving ajax, to do that - and on the PHP side you must receive the data and do something with it.

Because javascript (jQuery) can detect user events (e.g. clicking on an image), you can use js to get the ID of the picture and then use AJAX to send it to a back-end PHP file - which can then do something.

Simple code example:

/*  Example just demonstrates what jQuery looks like, and how js detects events*/$('img').click(function(){  tmp = this.id;  $('#msg').html(tmp).removeClass('hid').addClass('wow');  /* THIS part sends the ID to the back-end PHP file */  $.ajax({    type:'post',     url:'name_of_your_php_file.php',     data: 'id:' +tmp  });  setTimeout(function(){    $('#msg').html('The ID was transmitted to a non-existent back-end php file');  },500);});
$('#msg').click(function(){  $(this).removeClass('wow').addClass('hid');});

*{}#msg{position:fixed;top:0;width:40vw;height:30vh;background:#00f;opacity:0.5;}
.hid{display:none;}.wow{padding:30vh 30vw;color:yellow;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<img id="img_41" src="https://placeimg.com/140/80/any" />
<div id="msg" class="hid"></div>

How to pass id to the bootstrap modal?

You can use data attribute to pass some data into Bootstrap modal.

Buttons in the loop

@foreach()

     <a data-toggle="modal" data-id="{{$member->name}}" href="#UserDialog" class="user_dialog">Details</a>

@endforeach

Bootstrap model

<div class="modal hide" id="UserDialog">
 <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
    <div class="modal-body">
        <p>some content</p>
        <input type="text" name="user_name" id="user_name" value=""/>
    </div>
</div>

And little JavaScript

$(document).on("click", ".user_dialog", function () {
     var UserName = $(this).data('id');
     $(".modal-body #user_name").val( UserName );
});

That's it

Little demo here : http://jsfiddle.net/Au9tc/6247/

bind text to a specific id in a modalbox

<button class='read-button' type='button' id="button-<?php echo $row['id'];?>">Read more</button>

Now when you use jQuery selector, like

$('.read-button').click(function(){console.log($(this).attr('id');});

will output something like button-319. You can set other data attribute in the button too, like data-id=319 and use jQuery attr() to fetch that data. The point is you need to know which button is clicked and pass over the id.

How to pass value in bootstrap v4 modal?

var opener = $(e.relatedTarget); instead of var opener=e.relatedTarget;

Reference Bootstrap Modal

Hope this helps!

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" crossorigin="anonymous"></script>

<table>
    <tr>
        <th scope="row">2</th>
        <td>
            <a href="#articleEditModal" data-article-id="2" data-toggle="modal" class="btn btn-success btn-sm">Edit</a> 
            <a href="#" data-toggle="modal" data-target="#" class="btn btn-danger btn-sm">Delete</a>
        </td>
    </tr>
</table>


<!-- Modal-->
<div id="articleEditModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" class="modal fade text-left">
   <div class="modal-content">
      <div class="modal-header">
         <h5 id="exampleModalLabel" class="modal-title">Edit Article</h5>
         <button type="button" data-dismiss="modal" aria-label="Close" class="close">
         <span aria-hidden="true">×</span></button>
      </div>
      <div class="modal-body">
         <p>Please save your changes after editing the article.</p>
         <form id="myForm">
            <div class="form-group">
               <label>ID</label>
               <input type="text" value="" name="articleId" id="articleId" class="form-control">
         </form>
         </div>
         <div class="modal-footer">
            <button type="button" data-dismiss="modal" class="btn btn-secondary">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
         </div>
      </div>
   </div>
</div>

<script>
$('#articleEditModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget);

    var article_id = button.attr('data-article-id')
    // take advantage of data attribute
    // var article_id = button.data('article-id'); 

    var modal = $(this)
    modal.find('.modal-title').text('Article ' + article_id)
    modal.find('.modal-body input').val(article_id)
})
</script>

// Sample php data

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" crossorigin="anonymous"></script>

<?php
     require "../connection.php";
     $query = mysqli_query($conn, "SELECT * FROM `articles`");
     while($data = mysqli_fetch_array($query)) {
        echo '<tr>';
        echo '<th scope="row">'.$data['id'].'</th>';
        echo '<td><div align="center"><a href="#myModal" data-id="'.$data['id'].'" data-toggle="modal" class="btn btn-success btn-sm">Edit</a><a href="#" data-toggle="modal" data-target="#" class="btn btn-danger btn-sm">Delete</a></div></td>';
        echo '</tr>';
     }
?>
<!-- Modal-->
<div id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" class="modal fade text-left">
     <div role="document" class="modal-dialog">
          <div class="modal-content">
               <div class="modal-header">
                    <h5 id="exampleModalLabel" class="modal-title">Edit Article</h5>
                    <button type="button" data-dismiss="modal" aria-label="Close" class="close">
                    <span aria-hidden="true">×</span></button>
               </div>
          <div class="modal-body">
          <p>Please save your changes after editing the article.</p>
          <form id="myForm">
               <div class="form-group">
               <label>ID</label>
               <input type="text" value="" name="articleId" id="articleId" class="form-control">
          </form>
     </div>
     <div class="modal-footer">
          <button type="button" data-dismiss="modal" class="btn btn-secondary">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
     </div>
 </div>

<script>
$('#myModal').on('show.bs.modal', function (e) {
  // get information to update quickly to modal view as loading begins
  var opener=$(e.relatedTarget);//this holds the element who called the modal

   //we get details from attributes
  var myArticleId=$(opener).attr('data-id');

//set what we got to our form
  $('#myForm').find('[name="articleId"]').val(myArticleId);

});

</script>

How to pass $_GET variables from a link to a bootstrapmodal?

The simple solution to pass id, fetch records from database against passed id and show in modal is;

Simple Solution

Modal Call button

<td><span 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></span></td>

Modal HTML

Put following modal HTML outside the while loop in page where the above call button is located (preferable at bottom of page)

<div class="modal fade" id="editBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
          //Content Will show Here
        </div>
    </div>
</div>

Now Create a PHP file and name it file.php

This file is called with modal call button href="file.php?id=<?php echo $obj->id;?>"

<?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>

To remove the data inside modal or in other words to refresh the modal when open next records without page refresh, use following script

Put it after jQuery and Bootstrap library (Remember jQuery & Bootstrap libraries always come first)

<script>
$( document ).ready(function() {
    $('#editBox').on('hidden.bs.modal', function () {
          $(this).removeData('bs.modal');
    });
});
</script>

Alternate Solution with Ajax and Bootstrap Modal Event Listener

In Modal Call button replace href="file.php?id=<?php echo $obj->id;?> with data attribute data-id="<?php echo $obj->id;?>" so we pass the id of row to modal using bootstrap modal event

<td><span 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></span></td>

Modal HTML

Put following modal HTML outside the while loop in page where the above call button is located (preferable at bottom of page)

<div class="modal fade" id="editBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <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">
                <div class="form-data"></div> //Here Will show the Data
            </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>
        </div>
    </div>
</div>

Now Add following script in same page;

<script>
//jQuery Library Comes First
//Bootstrap Library
$( document ).ready(function() {       
    $('#myModal').on('show.bs.modal', function (e) { //Modal Event
        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
       }
    });
    });
});
</script>

Now Create a PHP file and name it file.php (same as use in Ajax Method)

<?php
//Include database connection here
if($_POST['id']) {
    $id = $_POST['id'];
    // Run the Query
    // Fetch Records
    // Echo the data you want to show in modal
 }
?>

In this solution, you don't need following script to remove the data inside modal or in other words to refresh the modal

$('#editBox').on('hidden.bs.modal', function () {
      $(this).removeData('bs.modal');
});

Alternate Solution with Ajax and jQuery Click function

Modal Call button

<td><span data-placement="top" data-toggle="tooltip" title="Show"><a class="btn btn-primary btn-xs" class="open-modal" href="" id="<?php echo $obj->id;?>"><span class="glyphicon glyphicon-pencil"></span></a></span></td>

Put following modal HTML in page where above modal call button located (preferable at bottom of page)

<div class="modal fade" id="editBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <div class="form-data"></div> //Here Will show the Data
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

following Ajax method code in same page where Modal HTML & Modal call button located.

<script>
//jQuery Library Comes First
//Bootstrap Library
$( document ).ready(function() { 
  $('.open-modal').click(function(){
    var id = $(this).attr('id');
    $.ajax({
      type : 'post',
       url : 'file.php', //Here you should run query to fetch records
      data : 'post_id='+ id, //Here pass id via 
      success : function(data){
          $('#editBox').show('show'); //Show Modal
          $('.form-data').html(data); //Show Data
       }
    });
  });
});
</script>

And the PHP file file.php will be same as the above solution with bootstrap modal event

Pass On page information to Modal

In some cases, only need to pass (display) minimal information to modal which already available on page, can be done with just bootstrap modal event without Ajax Method with data-attributes

<td>
  <span 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>
  </span>
</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 onpage values or information to modal  
     });
});

Passing a value from bootstrap data-id to a php variable

To elaborate on my comment previously.

You can use jQuery.ajax or even jQuery.post to achieve this.

For examples sake, your element has an id of mymonth

<li id="mymonth" data-toggle="modal" data-id="January" class="random " href="#AddMonth">January</li>

Now with jQuery you could get the trigger:

$(document).on('click', 'li#mymonth', function(){
    // get month
    var val = $(this).attr('data-id');

    $.post('myphpfile.php', {month: val}, function(data){
        console.log(data);
    });
});

As you can see, we grab the attribute data-id and store it in the val variable. Then post it off to the example php file : myphpfile.php

The myphpfile.php would have your php function as such (example of course):

<?php 

if(isset($_POST['month']) && !empty($_POST['month'])) {
    // do your sanatizing and such....
    // do your php stuff
    MethodSendMonthData($month);

   // you can echo back what you need to and use that in jquery as seen above
}

?>