How do I get value on a specific row on html table using modal and php
Question
I have a table that list Employee Leave record and status. Each record has a unique leave id. I want to view each row's leave id and status by clicking the 'View' modal button. However, all buttons display the first row data from the database. How do I make each button corresponds to its leave id number on every row. Please help. I'm super newbie here. LOL. Any help would be greatly appreciated. Thanks in advance.
<!DOCTYPE html>
<html>
<h2>Employee Leaves</h2>
<?php
$mysql_hostname = "localhost";
$mysql_user = "root";
$mysql_password ="";
$mysql_database = "employeerecord";
// Create connection
$conn = new mysqli($mysql_hostname, $mysql_user, $mysql_password, $mysql_database);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sqli = "SELECT emp_id, leave_id, last_name, first_name, leave_type, start_date, end_date, comment, date_filed, time_filed, status FROM leaves";
$result = $conn->query($sqli);
if ($result->num_rows > 0) { ?>
<table class="table">
<thead>
<tr>
<th>ID Number</th>
<th>Lastname</th>
<th>Firstname</th>
<th>Leave Type</th>
<th>Start Date</th>
<th>End Date</th>
<th>Comment</th>
<th>Date Filed</th>
<th>Time Filed</th>
<th>Status</th>
<th>Leave ID</th>
<th></th>
</tr>
</thead>
<?php
// output data of each row
while($row = $result->fetch_assoc())
{ ?>
<tbody>
<tr>
<td>
<?php echo $row["emp_id"]; ?>
</td>
<td>
<?php echo $row["last_name"]; ?>
</td>
<td>
<?php echo $row["first_name"]; ?>
</td>
<td>
<?php echo $row["leave_type"]; ?>
</td>
<td>
<?php echo $row["start_date"]; ?>
</td>
<td>
<?php echo $row["end_date"]; ?>
</td>
<td>
<?php echo $row["comment"]; ?>
</td>
<td>
<?php echo $row["date_filed"]; ?>
<td>
<?php echo $row["time_filed"]; ?>
</td>
<td>
<?php echo $row["status"]; ?>
</td>
<td>
<?php
$leavestatus = $row["status"];
$leaveid = $row["leave_id"];
echo $leaveid;
?>
</td>
<td>
<button type="button" name="<?php $leaveid; ?>" class="btn btn-default" data-toggle="modal" data-target="#myModal">View</button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Update Leave</h4>
</div>
<div class="modal-body">
<p>Leave ID:<?php echo $leaveid; ?></p>
<p>Leave Status:<?php echo $leavestatus; ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
<?php }
echo "</table>";
} else {
echo "0 results";
}
$conn->close();
?>
</html>
2 answers
solution1
1 2016-05-18 22:43:36
First, put the tbody tag outside that while loop:
while($row = $result->fetch_assoc())
{ ?>
<tbody>
<tr>
<td>
<?php echo $row["emp_id"]; ?>
</td>
<td>
</td>
</tr>
</tbody>
<?php }
should be:
while($row = $result->fetch_assoc())
{ ?>
<tr>
<td>
<?php echo $row["emp_id"]; ?>
</td>
<td>
</td>
</tr>
<?php }
Also the ID of the modal needs to match the property of the button revealing it:
<button type="button" name="<?php $leaveid; ?>" class="btn btn-default" data-toggle="modal" data-target="#myModal_<?php $leaveid; ?>">View</button>
<div class="modal fade" id="myModal_<?php $leaveid; ?>" role="dialog">
Give that a shot!
Best of Luck!
solution2
0 ACCPTED 2016-05-18 22:11:57
All of your modals have the same id. So the first one will get called when any button is clicked. Try this:
<button type="button" name="<?php echo $leaveid; ?>" class="btn btn-default" data-toggle="modal" data-target="#myModal-<?php echo $leaveid; ?>">View</button>
(also, you are missing the echo statement on your button name)
and
<div class="modal fade" id="myModal-<?php echo $leaveid; ?>" role="dialog">
Or better yet, just have one modal that is outside the loop and use jQuery to populate it when any button is clicked.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.