Passing data from page to bootstrap modal using SQL & PHP

Question

So as per title, im trying to pass show multiple data from database using sql on the bootstrap modal. The ID will be pass down from the link, how is it done? been finding multip

Answer 1

Create one class openModal in <a></a>. Use this class in <script></script> to get data-id

<?php  while($row = mysqli_fetch_array($adm_query,MYSQLI_ASSOC)){
    $id = $row['admin_id'];  ?>
        <tr>
            <td style="text-align:center"><?php echo $row['adm_name']; ?></td>
            <td width="150" style="text-align:center"><?php echo $row['staff_no']; ?></td>
            <td width="120" style="text-align:center"><?php echo $row['department']; ?></td>
            <td width="138" style="text-align:center;">                                 
                <a class="btn btn-outline btn-info openModal" data-toggle="modal" data-target="#myModal" data-id="<?php echo $row['admin_id']?>">
                    <i class="fa fa-search-plus"></i>
                </a>
            </td>
        </tr>
<?php }?>

Place this code in the same page below.

<div style="margin-top:5%;" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content"></div>
    </div>
</div>

JS (data-id=.. is passed here.)

<script>
  $('.openModal').click(function(){
      var id = $(this).attr('data-id');
      $.ajax({url:"ajax_modal.php?id="+id,cache:false,success:function(result){
          $(".modal-content").html(result);
      }});
  });
</script>

ajax_modal.php (Create one page in same directory ajax_modal.php. If you are looking to change this page name. Change in <script></script> tag too. Both are related.)

<?php 

// Get `id` from `<script></script>`
$id = $_GET['id'];

$sel_query=mysqli_query($conn, "select * from admin where admin_id='$id'") or die(mysql_error($conn)); 
$selrow=mysqli_fetch_array($sel_query,MYSQLI_ASSOC);
?>

<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  <h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
  <div class="panel panel-info" style="text-align:center;">
    <div class="panel-heading">
      <h4>Staff Details</h4>
    </div>
    <div class="panel-body">
      <div class="row">
        <div class="col-lg-6">
          <div class="form-group">
            <label>Staff ID</label>
            <p>
              <?php echo $selrow[ 'staff_no']?>
            </p>
          </div>
          <div class="form-group">
            <label>Name</label>
            <p>
              <?php echo $selrow[ 'adm_name']?>
            </p>
          </div>
          <div class="form-group">
            <label>Services | Department</label>
            <p>
              <?php echo $selrow[ 'department']?>
            </p>
          </div>
        </div>
        <!-- /.col-lg-6 (nested) -->
        <div class="col-lg-6">
          <div class="form-group">
            <label>Username</label>
            <p>
              <?php echo $selrow[ 'username']?>
            </p>
          </div>
          <div class="form-group">
            <label>Password</label>
            <p>
              <?php echo $selrow[ 'password']?>
            </p>
          </div>
          <div class="form-group">
            <label>Date</label>
            <p>
              <?php echo $selrow[ 'date_added']?>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

For more info, click here

1. how-to-pass-current-row-value-in-modal
2. passing-data-via-modal-bootstrap-and-getting-php-variable
3. bootstrap-modal-and-passing-value
4. show-data-based-of-selected-id-on-modal-popup-window-after-click-a-button-php-my

Answer 2

Write below line in your code:-

$selrow=mysqli_fetch_assoc($sel_query);

OR

$selrow=mysqli_fetch_array($sel_query,MYSQLI_ASSOC);

instead of

$selrow=mysqli_fetch_array($sel_query);

Also it is bad practice to write query directly into modal.

You should use AJAX on click event. Also you should fill form data via jQuery OR javascript.