xavier xavier - 6 months ago 31
SQL Question

How do I get value on a specific row on html table using modal and php

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">&times;</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>

Answer

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.