Delete Data using Checkbox with Select All option in PHP AJAX
- Tech Area
- November 2, 2023
In this tutorial, We will learn how to delete data using checkbox with select all option using JQuery AJAX in PHP and MySQL.
Files used in this tutorial:
1- connection.php (database connection file)
2- index.php (AJAX script)
3- fetch-data.php (fetch data from the table)
4- delete-data.php (delete data from the table)
Below are the step by step process of how to delete data with checkbox using Jquery AJAX.
Step 1: Create a Database connection
In this step, create a new file connection.php to create database connection.
connection.php
<?php
$server = "localhost";
$username = "root";
$password = "";
$database = "college_db";
$connection = mysqli_connect("$server","$username","$password");
$select_db = mysqli_select_db($connection, $database);
if(!$select_db)
{
echo("connection terminated");
}
?>Step 2: Create index.php
In this step, create a new file index.php. This is the main file used to implement AJAX to delete data using checkbox from the database using AJAX in PHP and MySQL.
This screenshot shows the table with checkbox select all option.
index.php
<!DOCTYPE html>
<head>
<title>Insert Checkbox Value using PHP AJAX</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
</head>
<style>
.box
{
width:100%;
max-width:900px;
background-color:#f9f9f9;
border:1px solid #ccc;
border-radius:5px;
padding:16px;
margin:0 auto;
}
.msg
{
color: red;
font-weight: 700;
}
</style>
<body>
<div class="container">
<div class="table-responsive">
<h3 align="center">Delete Data using Checkbox in PHP AJAX</h3>
<div class="box">
<div class="form-group">
<input type="submit" id="delete" value="Delete" class="btn btn-danger"/>
</div>
<table class="table table-bordered table-striped">
<thead style="background-color:#e3a53a;">
<th><input type="checkbox" id="select_all" value="0"></th>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Language</th>
</thead>
<tbody id="result">
</tbody>
</table>
<p class="msg"></p>
</div>
</div>
</div>
</body>
</html>Now use jquery AJAX script.
<script type="text/javascript">
$(document).ready(function(){
function load_result()
{
$.ajax({
url:'fetch-data.php',
method:'post',
success: function(result)
{
$("#result").html(result);
}
});
}
load_result();
$("#delete").click(function(){
var id = [];
$(':checkbox:checked').each(function(key){
id[key] = $(this).val();
});
if(id.length==0)
{
$(".msg").html("Please select atleast one checkbox");
}
else
{
$.ajax({
url:'delete-data.php',
method:'post',
data:{dlt_id:id},
success:function(result)
{
$(".msg").html(result);
load_result();
}
});
}
});
$("#select_all").change(function(){
if($(this).is(":checked"))
{
$('input[type=checkbox]').each(function(){
$('#'+this.id).prop('checked',true);
});
}
else
{
$('input[type=checkbox]').each(function(){
$('#'+this.id).prop('checked',false);
});
}
});
});
</script>Step 3: Create new file for fetch data
In this step, create a new file fetch-data.php. This file used to fetch data from the database.
fetch-data.php
<?php
include("connection.php");
$fetch_query = mysqli_query($connection,"select * from tbl_language");
$row = mysqli_num_rows($fetch_query);
$result = "";
if($row>0){
while($res = mysqli_fetch_array($fetch_query))
{
$result .="<tr>
<td><input type='checkbox' value='{$res['id']}' id='{$res['id']}'></td>
<td>{$res['id']}</td>
<td>{$res['name']}</td>
<td>{$res['email']}</td>
<td>{$res['language']}</td></tr>
";
}
echo $result;
}
?>
Step 4: Create new file for delete data
In this step, create a new file delete-data.php. This file used to delete data from the database.
delete-data.php
<?php
include("connection.php");
$delete_id = $_POST['dlt_id'];
$delete_id = implode($delete_id, ",");
$delete_query = mysqli_query($connection,"delete from tbl_language where id in({$delete_id})");
if($delete_query>0)
{
echo "Data Deleted!";
}
else
{
echo "Error!";
}
?>Download Source Code
Join 10,000+ subscriber