Today, We will see how to delete a record without refreshing the Page using PHP and AJAX . How to Highlight a Deleted Row in PHP.
Check out our More tutorial in PHP
Netflix clone app using Laravel
login form in React with Laravel
PHP CRUD Application using OOP and MYSQL
Delete the Record without Refreshing the Page
The below snippet is showing How We can highlight the Row with Jquery. I am using the Jquery Ajax technique for deleting the row, You can use Javascript As well.
Learn JQUERY from here https://jquery.com/
Our Database name is the test you can change the DB Name according to your choice.
Now we will see our code part here
I have made two files here one is our Landing page or you can say the main page ( Index Page ) . One file is for performing delete action.
index.php
<?php
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>CRUD</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"/>
</head>
<body>
<div class="card text-center" style="padding:15px;">
<h4>PHP: Delete using AJAX Technique</h4>
</div><br>
<div class="container">
<div class="row">
<div class="col-sm-10">
<table class="table table-hover table-bordered ml-4 ">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Age</th>
<th>Phone</th>
<th>Action</th>
</tr>
</thead>
<tbody id="output">
<?php
$conn = mysqli_connect('localhost','root','','test');
$sql_select = "SELECT * FROM student";
$sel_query = mysqli_query($conn,$sql_select);
while($row = mysqli_fetch_array($sel_query))
{
echo'<tr id="'.$row['id'].'">';
echo'<td>'.$row['id'].'</td>';
echo'<td>'.$row['name'].'</td>';
echo'<td>'.$row['age'].'</td>';
echo'<td>'.$row['phone'].'</td>';
echo'<td> <button class="remove" name="remove" id="'.$row['id'].'"><i class="fas fa-trash" style="color:red"></i></button></td>';
echo'</tr>';
}
?>
</tbody>
</table>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
<script>
$(document).ready(function(){
$('.remove').click(function(){
var userID = $(this).attr('id');
//alert(userID)
$.ajax({
type: "POST",
url: "delete.php",
data: {deleteID:userID},
success: function(data)
{
if(confirm('Are you sure you want to delete this?'))
{
$('#' + userID).css("background-color", "palegreen");
setTimeout(function() {
$('#' + userID).remove();
},500);
// $('#' + userID).remove();
}
}
});
// }
});
});
</script>
Now Here is the Delete record code in PHP
<?php
$conn = mysqli_connect('localhost','root','','test');
$deleteID = $_POST['deleteID'];
$sql_select = "DELETE FROM student WHERE id = $deleteID";
$sel_query = mysqli_query($conn,$sql_select);
if($sel_query)
{
echo "Success";
}
else
{
echo "Error";
}
?>
Now You can run the project in your Browser
Subscribe to My Programming YouTube Channel Before Downloading the code :
Download the Code from here: Highlight deleted row in PHP
Learn More about PHP and React
Display Selected Row record in Material UI Model Box using React