0

I have created a modal for viewing my data from table by clicking "Check Info" by sending the ID in the button through JavaScript. Tried countless methods available but the most would the same data from one particular row of data.

This is the part of my HTML & PHP script

$reservationInfo = "SELECT * FROM reservation ORDER BY reservation_id DESC";
$result = $con->query($staffInfo);

This is the table

<div class="card-body p-0">
                    <div class="table-responsive">
                      <table class="table table-striped table-md">
                        <tr>
                          <th>Name</th>
                          <th>Contact</th>
                          <th>Date</th>
                          <th>Time</th>
                          <th>Seats</th>
                          <th>Message / Orders</th>
                        </tr>
                        
                        <?php
                            $fetchAllReservations = mysqli_fetch_all($result, MYSQLI_ASSOC);
                            foreach ($fetchAllReservations as $row):
                            $id = $row['reservation_id'];
                            $message = $row['message'];
                            $orders = $row['orders'];
                        ?>
                        
                        <tr>
                          <td><?php echo $row['name']; ?></td>
                          <td><?php echo $row['contact']; ?></td>
                          <td><?php echo $row['date']; ?></td>
                          <td><?php echo $row['time']; ?></td>
                          <td><?php echo $row['seats']; ?></td>
                          <!--<td><?php echo $row['message']; ?></td>-->
                          <td>
                                
                         <a type="button" onclick="setReservationId(<?= $row['reservation_id'], $row['message'], $row['orders'] ?>) " data-target="#modal-info" href="#modal-info" data-toggle="modal" class="btn btn-primary">Check Info</a>
    
                          
                        </tr>
                        <?php endforeach; ?>
                       
                      </table>
                    </div>
                  </div>

This is the snippet of my modal

<div class="modal fade" id="modal-info" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true" id="<?php echo $row['reservation_id']; ?>">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalCenterTitle">Customer Pre-Order / Message [ID]</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        </div>
                        <div class="modal-body" >
                            <p><b>Pre-Order</b></p>
                            
                            <hr>
                            <p><b><u>Special Requests</u></b></p>
                            
                        </div>
                        <div class="modal-footer bg-whitesmoke br">
                            <button type="button" class="btn btn-primary">Save</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>

While this is the snippet of my JavaScript

<script>
        function setReservationId(reservation_id) {
            document.querySelector("#reservation_id").innerHTML = reservation_id;
        }
</script>

I apologize if the code looks messy as I've tried countless ways and already came to the extend that the backup codes and the current code is mixed.

Here's a photo of the modal that shows the same data pulled from database Modal Image

Art
  • 11
  • 5

0 Answers0