Make delete confirmation modal using PHP - php

Question

I have a delete button in a data table like this:
<div class="card mb-3" style="width:70%;">
<div class="card-header">
<i class="fas fa-table"></i>
Perusahaan</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Kode Perusahaan</th>
<th>Nama Perusahaan</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
$conn = mysqli_connect("127.0.0.1","root","","penggajian");
$sql = "SELECT * FROM perusahaan";
$getperusahaan = mysqli_query($conn,$sql);
while($list = mysqli_fetch_array($getperusahaan, MYSQLI_ASSOC)){
echo "<tr><td>";
echo $list['kode'];
echo "</td><td>";
echo $list['nama'];
echo "</td><td>";
?>
<button type="button" data-id="<?php echo $list['id_perusahaan']; ?>" class="btn btn-primary btn-sm passingID" data-toggle="modal" data-target="#editperusahaan"><i class="fas fa-pencil-alt"></i> Edit</button></a>
<button type="button" data-toggle="modal" data-target="#konfirmasi" class="btn btn-danger btn-sm delete" style="margin-left: 10px;"><i class="far fa-times-circle"></i> Delete</button>
</td></tr>
<?php
}
?>
</tbody>
</table>
</div>
when i click the delete button i want to make a confirmation on a bootstrap modal, before the user can delete it. This is my modal:
<div class="modal fade" id="konfirmasi" 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">Konfirmasi Penghapusan Data</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Hapus Data?</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
Hapus
</div>
</div>
</div>
</div>
The problem is that i don't know how to passed the $list['id'] from the data table to my modal

Answer 1

Replace this in your table list
<button data-id="<?php echo $list['id'];?>" type="button" data-toggle="modal" data-target="#konfirmasi" class="btn btn-danger btn-sm delete-button" style="margin-left: 10px;"><i class="far fa-times-circle"></i> Delete</button>
Replace this in your modal popup HTML
<a data-id="" class="btn btn-danger confirm-delete">Hapus</a>
Add javascript code
$('.delete-button').on('click', function (e) {
var id = $(this).attr('data-id');
$('.confirm-delete').attr('data-id',id);
});
$(".confirm-delete").on('click', function (e) {
var id = $(this).attr('data-id');
console.log(id);
location.href="hapusperusahaan.php?id="+id;
});
for test
http://jsfiddle.net/b8m03kjr

Answer 2

try this:
button class="btn btn-danger btn-sm remove">Delete</button>
//delete.php
$id = $_GET['id'];
//Connect DB
$conn = mysqli_connect("127.0.0.1","root","","penggajian");
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
// sql to delete a record
$sql = "DELETE FROM perusahaan WHERE id = $id";
echo"sucess message";
//js
$(".remove").click(function(){
var id = $(this).parents("tr").attr("id");
if(confirm('Are you sure to delete this record ?'))
{
$.ajax({
url: '/delete.php',
type: 'GET',
data: {id: id},
error: function() {
alert('Something is wrong');
},
success: function(data) {
$("#"+id).remove();
alert("Record deleted successfully");
}
});
}
});