Passing Variable from Button to Modal

Passing data to a bootstrap modal

I think you can make this work using jQuery's .on event handler.

Here's a fiddle you can test; just make sure to expand the HTML frame in the fiddle as much as possible so you can view the modal.

http://jsfiddle.net/8c05pn1f/

HTML

<p>Link 1</p>
<a data-toggle="modal" data-id="ISBN564541" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>

<p> </p>


<p>Link 2</p>
<a data-toggle="modal" data-id="ISBN-001122" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>
    
<div class="modal hide" id="addBookDialog">
 <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="bookId" id="bookId" value=""/>
    </div>
</div>

JAVASCRIPT

$(document).on("click", ".open-AddBookDialog", function () {
     var myBookId = $(this).data('id');
     $(".modal-body #bookId").val( myBookId );
     // As pointed out in comments, 
     // it is unnecessary to have to manually call the modal.
     // $('#addBookDialog').modal('show');
});

Pass value to modal on button click

Instead of using an input field you could create a container element for the id, a div or span and update content of the element using .html() jQuery method.

$(document).on("click", ".open-homeEvents", function () {     var eventId = $(this).data('id');     $('#idHolder').html( eventId );});

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <title>Modal</title><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> </head><body><button class="open-homeEvents btn btn-primary" data-id="2014-123456"  data-toggle="modal" data-target="#modalHomeEvents">More Details</button> <div id="modalHomeEvents" class="modal fade" role="dialog">    <div class="modal-dialog">
      <!-- Modal content-->      <div class="modal-content">        <div class="modal-header" style="height:50px;">          <button type="button" class="close" data-dismiss="modal">×</button>        </div>        <div class="modal-body">
         <label>Student ID</label>             <input type="hidden" name="eventId" id="eventId"/>         <span id="idHolder"></span>         </div>        <div class="modal-footer">          <input type="submit" class="btn btn-primary" value="Login" name="login" style="background-color:rgb(0,30,66); ">          <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>        </div>      </div>
    </div>  </div> <script src="https://code.jquery.com/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script></body></html>

How to pass variable to modal in Bootstrap 3

Yes, Its possible by Bootstrap3 with help of predefined modal method like $('#myModal').on('show.bs.modal', function(e) {...}).

Doc: https://getbootstrap.com/docs/3.3/javascript/#modals-events

I hope below snippet will help you lot.

// data-* attributes to scan when populating modal valuesvar attributesArray = ['myvalue', 'myvar', 'bb'];// This event fires immediately when the show instance method is called. $('#myModal').on('show.bs.modal', function(e) {  // Get modal id  var $target = e.target.id;  // Get target values of clicked button  var $relatedTarget = e.relatedTarget;  // Iterate over each possible data-* attribute  attributesArray.forEach(function(attributeName){    $('#'+$target+ ' #modal-'+attributeName).text($($relatedTarget).data(attributeName) || '');  });});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<br><br><div class="container">  <div class="row">    <div class="col-sm-12">      <!-- Button trigger modal -->      <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-myvalue="trouducul" data-myvar="bisbis">        Launch demo modal 1      </button>      <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-myvalue="troudbal" data-bb="troudbal">        Launch demo modal 2      </button>     </div>   </div></div>
<!-- Modal --><div class="modal fade" id="myModal" 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">      <h4>       <span id="modal-myvalue"></span>       <span id="modal-myvar"></span>       <span id="modal-bb"></span>      </h4>    </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>

Passing variable's value to modal box in PHP

Javascript variables and modal box's value of bookId need to be re-defined. A possible use case as below.

Body Code

<a href="#" data-toggle="modal" data-target="#takeaction" class="btn btn-default"></a>

Modal Box

<div class="modal fade" id="takeaction" 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">Display Apply Id in modal box in a dynamic way? </h4>    
    </div>
    <div class="form-inline container hidden-xs hidden-sm">
    <input type="number" value="<?php echo $apply?>" class="form-group" placeholder="Job Code"> 
    </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal"><span>Confirm</span></button>
    </div>
    </div>
    </div>
    </div>

Javascript Code

<script type="text/javascript">
$('#takeaction').on('show.bs.modal', function(e) {
var apply = $(e.relatedTarget).data('apply');
$(e.currentTarget).find('input[name="apply"]').val(apply);
});
</script>

pass variables to a bootstrap modal

Data attributes may help you pass the data you need in the function in a seamless manner and also help you avoid maintenance unfriendly inline JavaScript. Set up three event listeners as follows:

function checkboxUpdated(checkbox, count, label, id) {
    var checkbox = this,
        count = $(checkbox).data('count'),
        label = $(checkbox).data('label'),
        id = checkbox.value;
    if(checkbox.checked) {
        $('#menu_entry_' + id).show();
    } else {
        if (count > 0) {
            $('#confirm_modal').data('element', checkbox).find('div.modal-body p:first')
            .html( 'You have ' + count + ' saved ' + label + '. Are you sure you want to delete your ' + count + ' saved ' + label + '?' ).end()
            .modal('show');
            return;
        }
        $('#menu_entry_' + id).hide();
    }
}
$(function() {
    $(':checkbox').on('change', checkboxUpdated).change();
    $('.confirm-no').on('click', function() {
        var element = $('#confirm_modal').data('element');
        element.checked = true;
    });
    $('.confirm-yes').on('click', function() {
        var element = $('#confirm_modal').data('element'),
            id = element.value;
        $('#menu_entry_' + id).hide();
    });
});

DEMO