In this article 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 MySQL.
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.
Creating the Database Table
The first step in this tutorial is the creation of a MySQL database. you can create tables by running SQL queries. Create a table ‘users’ in database using the following SQL query.
This will create a new table ‘users’ in the database. I will use this table to insert file.
-- -- Table structure for table `users` -- CREATE TABLE `users` ( `id` int(50) NOT NULL PRIMARY KEY AUTO INCREAMENT, `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
Create MySql Connection in PHP
For importing and exporting database in MySql will make a separate file ‘dbCongif.php’. Add the following code and replace the database credentials with yours. You can find your db credentials in Application Access details:
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);
}
?>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");
}
}
});
}
});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.😊
how to get the id from form ???
please visit this link https://webcodx.blogspot.com/2020/07/how-to-display-data-to-mysql-from-php.html
this is another article related to this topic where I get the id from the use of (data-id) attr in delete button