How do I pass ID value of table in modal - php

Question

I want to pass the id value of student in the modal form. When I clicked the button 1stgrade, here is my table code:
<tbody>
<?php
require_once '../dbconfig.php';
$stmt = $db_con->prepare("SELECT * FROM userinfo WHERE role='student' AND gradelvl='7' AND sectionname='$_POST[table7]' ORDER BY lrnno ASC");
$stmt->execute();
while($row=$stmt->fetch(PDO::FETCH_ASSOC))
{
?>
<tr>
<td><?php echo $row['fname']; ?></td>
and this is my modal form:
<td>
<div align="center">
<form action="studentprofilegradeaction.php" method="POST" class="form-horizontal">
<input type='text' name='id' value='<?php echo $row['id']; ?>' />
<!-- Button HTML (to Trigger Modal) -->
<i class="fa fa-building"></i>1st
<!-- Modal HTML -->
<div id="1stgrade7" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<input type='text' value='<?php echo $row['id'] ?>' />
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 class="modal-title">Please Fill Correctly</h2>
</div>
<div class="modal-header">
<h4 class="modal-title">1st Grading Result </h4>
</div>
<div class="modal-body">
<div align="left">
<b>Filipino:</b>
<input type="text" class="form-control" name="c71stgfilipino" >
</div>
I want to pass the id number to modal 1stgrade.

Answer 1

Replace your anchor tag:
<i class="fa fa-building"></i>1st
=>
<a id="openModal" data-id="<?php echo $row['id']; ?>" class="btn btn-info"><i class="fa fa-building"></i>1st</a>
Remove other unnecessary code from your while loop, keep modal code outside the loop and give id to your id input inside modal:
<input id="userId" type='text' value='<?php echo $row['id'] ?>' />
Then you need jquery to read the od of clicked row and set it to modal write this after :
<script>
$(document).ready(function() {
$("#openModal").click(function() {
//remove previous value
$("#userId").val("");
//this ll set id to your modal input
$("#userId").val($(this).attr("data-id"));
//open the modal
$("#1stgrade7").modal("show");
});
});
</script>