Multiple delete checkbox using php and jquery
If you are beginner in PHP development, you might wondering how to delete rows of data triggered in check all and delete.
We can do that with jquery to be able to click event all check boxes and process with php behind.
In this web development tutorial we will show you, using PHP and jQuery to develop a simple web application a function can able to multiple delete records, using check box.
See the Demo
Step 1: Setting up the database
First thing to do we need some dummy data, go your phpmyadmin and create a database let say your database name is ‘multiple_delete’, after creating a database, create a table let say your table name is ‘products’ and we add the following fields to the table.
- id
- product_title
- product_price
After creating the table ‘products’, insert some of sample products.
INSERT INTO products (product_title, product_price) VALUES
('Iphone 13 1TB', '$1000'),
('Playstation 5 1TB', '$999'),
('Nintendo Switch', '$400'),
('Nintendo Switch Oled', '$500'),
('Mac Book', '$800'),
('Ipad Mini 4', '$700'),
('Ipad Mini 5', '$800'),
('Creamer', '$5'),
('Barbie Doll', '$20'),
('GPS', '$350');
Step 2: Create Php Database Connection
We have our product sample from the database, so we need to connect from database. Create a file named ‘database.php’, and input the following code.
database.php
<?php
$db = mysqli_connect('localhost', 'root', '', 'axlmulat_demo');
if(!$db) { echo mysqli_connect_error(); }
?>
We have assigning the database credentials. the MySQL host, username, password and database name.
Step 3: Displaying the Product from the Database
To grab the data from the database, create file name index.php, our home page, and input the following code snippet.
index.php
<?php
require_once("database.php"); // 1. require the database file
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Axl Mulat</title>
<link href="style/style.css" rel="stylesheet" type="text/css" media="all" /> <!--- include the css file -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script> <!--- include the our jquery file -->
</head>
<body>
<div id="wrap" align="center"> <!--wrap start-->
<h1>PHP and jQuery Delete Multiple Records</h1>
<form action="delete.php" method="post" name="data_table">
<table id="table_data">
<tr>
<td>id</td>
<td>Product name</td>
<td>Price</td>
<td>Check All <input type="checkbox" id="check_all" value=""></td>
</tr>
<?php
$query = mysqli_query($db, "SELECT `id`, `product_title`, `product_price` FROM `products`");
while($row = mysqli_fetch_assoc($query)) {
?>
<tr>
<td><?php echo $row['id']; ?></td>
<td><?php echo $row['product_title']; ?></td>
<td><?php echo $row['product_price']; ?></td>
<td><input type="checkbox" value="<?php echo $row['id']; ?>" name="data[]" id="data"></td>
</tr>
<?php } unset($row); ?>
</table>
<br />
<input name="submit" type="submit" value="Delete" id="submit">
</form>
</div> <!--wrap end-->
</body>
</html>
We require the ‘database.php’ for our php database connection, and perform a simple query to fetch the data, and also we need to include the CSS for simple style and jQuery live script and jQuery script.
style/style.css
body {
background: url(../images/bg.jpg);
font-family: Arial, Helvetica, sans-serif;
font-size:13px
}
h1 {
color:#000000;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
p {
margin:10px;
padding:10px;
color:#000000;
}
table#table_data {
border: 1px solid #CCCCCC;
width: 485px;
}
table#table_data tr:first-child {
font-weight:bold;
text-transform:uppercase
}
table#table_data tr td {
border: 1px solid #CCCCCC;
text-align:center
}
table#table_data tr:first-child {
text-align:center;
border:1px solid #999
}
Step 4: Creating the jQuery Script
We create the jQuery script to triggered the all check boxes in the form, create file name ‘script.js’ and input the code snippet below.
js/script.js
jQuery(function($) {
$("form input[id='check_all']").click(function() {
var inputs = $("form input[type='checkbox']");
for(var i = 0; i < inputs.length; i++) {
var type = inputs[i].getAttribute("type");
if(type == "checkbox") {
if(this.checked) {
inputs[i].checked = true;
} else {
inputs[i].checked = false;
}
}
}
});
$("form input[id='submit']").click(function() {
var count_checked = $("[name='data[]']:checked").length;
if(count_checked == 0) {
alert("Please select a product(s) to delete.");
return false;
}
if(count_checked == 1) {
return confirm("Are you sure you want to delete these product?");
} else {
return confirm("Are you sure you want to delete these products?");
}
});
}); // jquery end
Step 5: The Deleting Process
After posting the data in the form action attribute, we create the PHP script to catch the post data and process the deleting script. Create the file name ‘delete.php’ and input the code snippet below.
delete.php
<?php
require_once("database.php");
if(isset($_POST['submit'])) {
$id_array = $_POST['data']; // array na
$id_count = count($_POST['data']); // count array
for($i=0; $i < $id_count; $i++) {
$id = $id_array[$i];
$query = mysqli_query($db, "DELETE FROM `products` WHERE `id` = '$id'");
if(!$query) { die(mysqli_connect_error()); }
}
header("Location: index.php");
}
?>
Important Notes:
If you use this script for template selling or plugin selling or any kind of selling like website themeforest.net / any theme, plugins selling sites, Don’t include a link like ‘Credit to axlmulat.com’ or any link from axlmulat.com.
Again !!! if you are a TEMPLETE SELLER / PLUGIN SELLER. don’t Credit a link
You can use this script all you want…
Thank you and happy coding…
Step 5: Complete
And now were done, the php web application can able to delete multiple records using PHP and jQuery. Let’s have a look at what we’ve achieved:
- We’ve set up a database, table and products for our data.
- We’ve create a simple form to retrieve the data
- We’ve create the jQuery script to triggered the check boxes.
- We’ve create the deleting process to delete the post data array.
If you enjoyed this article, please consider sharing it!
