How to add while loop variable to bootstrap modal php - php

Question

I have a table in a while loop that includes a edit button to a modal. What I am trying to achieve is when you click the modal button "edit" the data in the modal will correspond with the correct teacher name. So I am trying to loop the modals and the data in it. What I have done is not working, it is only showing either the first or last value in the array for all modals in the loop.
so the table looks like this
| teacher name | Phone | Email | Edit | Delete |
| Mary | 111-111-1111 | mary#mary.com | Edit | Delete |
| Rob | 111-111-1111 | rob#rob.com | Edit | Delete |
| Liz | 111-111-1111 | Liz#Liz.com | Edit | Delete |
When I click on any of the edits the teacher name "Mary" shows up for all of them. But what I want is for Mary to show for the 1st edit, Rob to show for the 2nd edit, and so forth...
CODE:
<!--TABLES-->
<div id="table" class="table-responsive-sm container">
<table id="feisHistory" class="table table-striped table-bordered responsive table-hover" cellspacing="0" style="width:100%">
<thead>
<tr>
<th id="teacherName" >Teacher Name</th>
<th id="phone">Phone</th>
<th id="email">Email</th>
<th id="edit" data-feild="operate" data-events="operateEvents" data-formatter="operateFormatter" class="d-print-none">Edit</th>
<th id="delete" data-feild="operate" data-events="operateEvents" data-formatter="operateFormatter" class="d-print-none">Delete</th>
</tr>
</thead>
<tbody>
<?php
$school_sql = "SELECT * FROM `Users` WHERE id = '$id'";
$school_res = mysqli_query($con,$school_sql);
$school_row = mysqli_fetch_array($school_res);
$school_name = $school_row["school"];
$sql = "SELECT * FROM `teachers` WHERE school = '$school_name' ORDER BY teacher ASC";
$res = mysqli_query($con,$sql);
if($res==FALSE){
die('there was an error running query [' . $con->error . ']');
}
while($row=mysqli_fetch_array($res)){
$teacherName = $row["teacher"];
$teacherPhone = $row["phone"];
$teacherEmail = $row["email"];
$teacherId = $row["id"];
?>
<tr>
<td><?php echo $teacherName; ?></td>
<td><?php echo $teacherPhone; ?></td>
<td><?php echo $teacherEmail; ?></td>
<td class="d-print-none" style="margin: auto;">
Edit
<!---MODAL BUTTON-->
<div class="col-sm-12 content-btn">
<div class="row">
<div class="col-sm-12">
<div class="formModal1">
<div class="modal fade bd-editprofile-modal-lg" id="editProfile" tabindex="-1" role="dialog" aria-labelledby="editProfile" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-success modal-lg" role="document">
<div class="modal-content">
<div class="modal-header" style="color: #464646">
<h5 class="modal-title text-center">Edit Teacher</h5>
</div>
<form id="updateForm" method="post" class="form-horizontal" name="tcol" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" role="form" data-toggle="validator">
<input type="hidden" name="id" value="">
<div class="controls">
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="form-group col-sm-12">
<div class="row">
<div class="col-sm-3">
<label> Teacher Name</label>
</div>
<div class="col-sm-8">
<input id="teacher_name" type="text" name="teacher_name" class="form-control" placeholder="<?php echo $teacherName?>">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- MODAL FOOTER -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" name="save" id="save">Save changes</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="d-print-none" style="margin: auto;">
Delete
</td>
</tr>
<?php } ?>
</tbody>
</table>
I know my code is sloppy, please don't criticize me too much.. I'm still learning.

Answer 1

You could use the non-ajax version, but you should avoid this since it is rewriting large amount of code (depends on the records), by assigning unique id on each of elements id within the while loop, maybe you could use $teacherId as an identifier :
while($row=mysqli_fetch_array($res)){
$teacherName = $row["teacher"];
$teacherPhone = $row["phone"];
$teacherEmail = $row["email"];
$teacherId = $row["id"];
?>
<tr>
<td><?php echo $teacherName; ?></td>
<td><?php echo $teacherPhone; ?></td>
<td><?php echo $teacherEmail; ?></td>
<td class="d-print-none" style="margin: auto;">
Edit
<!---MODAL BUTTON-->
<div class="col-sm-12 content-btn">
<div class="row">
<div class="col-sm-12">
<div class="formModal1">
<div class="modal fade bd-editprofile-modal-lg" id="editProfile<?=$teacherId?>" tabindex="-1" role="dialog" aria-labelledby="editProfile" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-success modal-lg" role="document">
<div class="modal-content">
<div class="modal-header" style="color: #464646">
<h5 class="modal-title text-center">Edit Teacher</h5>
</div>
<form id="updateForm<?=$teacherId?>" method="post" class="form-horizontal" name="tcol" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" role="form" data-toggle="validator">
<input type="hidden" name="id" value="">
<div class="controls">
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="form-group col-sm-12">
<div class="row">
<div class="col-sm-3">
<label> Teacher Name</label>
</div>
<div class="col-sm-8">
<input id="teacher_name<?=$teacherId?>" type="text" name="teacher_name" class="form-control" placeholder="<?php echo $teacherName?>">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- MODAL FOOTER -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" name="save" id="save<?=$teacherId?>">Save changes</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="d-print-none" style="margin: auto;">
Delete
</td>
</tr>
<?php } ?>

Answer 2

You can solve this with many ways, and i use ajax for this solution.
And this one example how to use ajax to get data for each teacher name.
$('.edit').on('click', function(){
let id = $(this).attr("data-id");
let tempurl = "";
// this is example cause i create seperate json data, you can dynamically create select your DB based on id
if (id == 1){
tempurl = "https://api.myjson.com/bins/19w0nm";
}else if (id == 2){
tempurl = "https://api.myjson.com/bins/rhq2a";
}else if (id == 3){
tempurl = "https://api.myjson.com/bins/m4tma";
}
$.ajax({
url: tempurl,
type: "get",
dataType: "JSON",
data: {}, //this is data you send to your server
success: function(res)
{
console.log(res);
$('#tchName').val(res.name);
$('#tchPhone').val(res.phone);
$('#tchEmail').val(res.email);
$("#modalEdit").modal('show');
}
})
})
$('#btnSave').on('click', function(e){
e.preventDefault();
$("#modalEdit").modal('toggle');
alert('Your data has been update');
})
<html>
<head>
<title>SO</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="modal" tabindex="-1" role="dialog" id="modalEdit">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal Edit</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<label for="">Name</label>
<input type="text" name="tchName" id="tchName" value="">
<br>
<label for="">Phone</label>
<input type="text" name="tchPhone" id="tchPhone" value="">
<br>
<label for="">Email</label>
<input type="text" name="tchEmail" id="tchEmail" value="">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" id="btnSave">Save changes</button>
</div>
</div>
</div>
</div>
<h3>Testing Table</h3>
<div class="col-md-6">
<table class="table table-bordered" style="text-align:center">
<thead>
<td>Name</td>
<td>Phone</td>
<td>Email</td>
<td>Action</td>
</thead>
<tr>
<td><?php echo 'Teacher Name 1'; ?></td>
<td><?php echo '0211'; ?></td>
<td><?php echo 'email1#email.com'; ?></td>
<td class="d-print-none" style="margin: auto;">
<button data-toggle="modal" class="edit" data-id="1">Edit</button>
</tr>
<tr>
<td><?php echo 'Teacher Name 2'; ?></td>
<td><?php echo '0222'; ?></td>
<td><?php echo 'email2#email.com'; ?></td>
<td class="d-print-none" style="margin: auto;">
<button data-toggle="modal" class="edit" data-id="2">Edit</button>
</tr>
<tr>
<td><?php echo 'Teacher Name 3'; ?></td>
<td><?php echo '0223'; ?></td>
<td><?php echo 'email3#email.com'; ?></td>
<td class="d-print-none" style="margin: auto;">
<button data-toggle="modal" class="edit" data-id="3">Edit</button>
</tr>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
ignore the tempurl, you can create function to select and get specific data of your teacher based on teacher name, id or anything else.