php - Fetching data from table and display in Bootstrap modal to edit
Get the solution ↓↓↓I am trying to use Bootstrap modal for updating my data in database. But I'm getting an error
on my script in passing the data from my table to my modal. I use edit icon to triggered my modal to pop up but data from my table is not displaying.
this is my table:
this is the error I get whenever I try to fetch the data from my table and display to my modal to edit:
<div class="col-md-12 " style="margin-top: 3rem !important; padding-bottom:10rem;">
<table id="example" class="table table-striped table-bordered" style="width:100%; ">
<thead>
<tr>
<!-- <th>ID</th> -->
<th>School Year</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
if(mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_array($result)) {
?>
<tr>
<!-- <td>< ? php echo $row['id']; ?></td> -->
<td><?php echo $row['school_year']; ?></td>
<td>
<?php
if($row['status'] == 1)
{
echo "<button class='btn btn-success' style='width:6rem !important; font-size:13px'>Active</button>";
}
else{
echo "<button class='btn btn-primary' style='width:6rem !important; font-size:13px'>Inactive</button>";
}
?>
</td>
<td>
<!-- THIS IS MY BUTTON FOR BOOTSTRAP TO EDIT AND DELETE -->
<a style="padding:20px; color:green;"><i class="far fa-edit editbtn"></i></a>
<a style="color:darkred" data-href="../Actions/school_year_delete.php?id=<?php echo $row['id']?>" ;
data-toggle="modal" data-target="#confirm-delete"><i class="fas fa-trash"></i></a>
</td>
</tr>
<?php}} ?>
</tfoot>
</table>
</div>
<!-- Modal For Editing-->
<div class="modal fade" id="editmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit School Year</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="school_year.php" method="POST">
<div class="modal-body">
<div class="col-md-10 m-auto">
<br>
<label for="">School year</label>
<input type="text" name="year" id="year" class="form-control">
<label for="">Status</label>
<select type="number" name="status" id="status" class="form-control">
<option value="" selected disabled>--Select if default</option>
<option value=" 1 ">Active</option>
<option value="2">Inactive</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" name="add" value="name" class="btn btn-primary">Update</button>
</div>
</form>
</div>
</div>
</div>
THIS IS MY Script
$('.editbtn').on('click', function() {
$('#editmodal').modal('show');
$tr = $(this).closest('tr');
var data = $tr.children("td").map(function() {
return $($this).text();
}).get();
console.log(data);
$('#school_year').val(data[0]);
$('#status').val(data[1]);
});
Answer
Solution:
since I don't have enough reputation to comment on your question, You give wrong id in bootstrap-modal :
<label for="">School year</label>
<input type="text" name="year" id="school_year" class="form-control">
<label for="">Status</label>
Share solution ↓
Additional Information:
Link To Answer People are also looking for solutions of the problem: php_network_getaddresses: getaddrinfo failed: temporary failure in name resolution
Didn't find the answer?
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.