how to pass php variables to bootstrap modals

Bilal Khatib answered on January 20, 2023 Popularity 4/10 Helpfulness 3/10

answer how to pass php variables to bootstrap modals

how to pass php variables to bootstrap modals

Comment

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-var="<?php echo $php_var; ?>">
  Open Modal
</button>

<div class="modal" tabindex="-1" role="dialog" id="myModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <input type="hidden" id="php_var" value="">
        <p>The value of the PHP variable is: <span id="php_var_value"></span></p>
      </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>

<script>
$('#myModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var php_var = button.data('var') // Extract info from data-* attributes
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('#php_var').val(php_var)
  modal.find('#php_var_value').text(php_var)
});
</script>

Popularity 4/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: javascript php variables

Link to this answer
Share Copy Link

Contributed on Jan 20 2023

Bilal Khatib

0 Answers Avg Quality 2/10

how to pass php variables to bootstrap modals

Contents

More Related Answers

how to pass php variables to bootstrap modals

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.