How to Delete record to MySql from PHP using jQuery AJAX


How to Delete record to MySql from PHP using jQuery AJAX
Hello friends, in this tutorial we will learn how to delete a record from the MySQL database using Ajax Jquery with out page refreshing with confirmation box in the PHP. Now I am explaining how to delete a record or data with out refreshing page using AJAX-jQuery  and PHP mysqli.
Deleting a data or record using AJAX-Jquery is a very simple process.As we are going to discuss that we need database from where we delete a record without refreshing a page. Let us see database details for it.
So let’s get started, but before you read the last post, you can read it here.
Here we using three file for View/display data in MySql database using Ajax.
  1. database.php     // database connectivity file
  2. index.php         //  data display or data retrieve page   
  3. delete.php        //  record delete file

Creating Database Table

  • First create your database name in phpmyadmin Using XAMPP webserver. create a database called testing. Inside testing database, create a table called users. The users table will take following fields
 --  
-- Table structure for table `users`
--
CREATE TABLE `users` (
`id` int(50) NOT NULL,
`name` varchar(50) NOT NULL,
`email` varchar(50) NOT NULL,
`password` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
  • You also need to insert some values in your table

Creating HTML Page

  • Now we will create a simple index page to show users table records after inserting in users table by fetching value from database.
  • You can use the following HTML code to create your page. Copy and save it as index.php in your project folder.
index.php

 <!DOCTYPE html>   
<html lang="en">
<head>
<title>How to delete data to MySql from PHP using jQuery AJAX</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2 style="text-align: center;">How to Delete data to MySql from PHP using jQuery AJAX</h2>
<div id="tableData">
</div>
</div>
</body>
</html>

Creating jQuery AJAX Script

 // Delete record to MySql from PHP using jQuery AJAX  
$(document).on("click",".delete-btn",function(){
if (confirm("Are you sure delete this ?")) {
var id = $(this).data('id');
var element = this;
$.ajax({
url :"delete.php",
type:"POST",
cache:false,
data:{deleteId:id},
success:function(data){
if (data == 1) {
$(element).closest("tr").fadeOut();
alert("User record deleted successfully");
}else{
alert("Invalid User id");
}
}
});
}
});
database.php

 <?php  
// create database connectivity
$servername = "localhost";
$username = "root";
$password = "";
$database = "testing";
// Create connection
$con = new mysqli($servername, $username, $password, $database);
// Check connection
if ($con->connect_error) {
die("Connection failed: " . $con->connect_error);
}
?>
Delete.php
 <?php  
// create database connectivity
require_once('database.php');
if (isset($_POST['deleteId'])) {
$deleteId = $_POST['deleteId'];
}
// check record exists
$sql = "SELECT * FROM users WHERE id = {$deleteId}";
$result = $con->query($sql);
if ($result->num_rows > 0) {
// Delete record from users table
$query = "DELETE FROM users WHERE id = {$deleteId}";
if ($con->query($query)) {
echo 1;
exit;
}else{
echo 0;
exit;
}
}
?>

This post is about how to use AJAX to delete record from a database in PHP. If you have any confusion in my code or a problem with the steps, don’t hesitate to ask in your comments. thank you
You can always support by sharing on social media or recommending my blog to your friends and colleagues.    
If you have any suggestions / problems about this tutorial, please comment on the  form below.😊


Leave a Reply