Hi Freinds in this post we will discuss about How to delete multiple data in PHP MySQL using JavaScript. delete records one by one is very time consuming. Mltiple records on a single click with select check box is strongly recommended for every content management system. The checkbox should be displayed with each row. Checkbox would be used for select multiple records from user list. we will also provide a checkbox at the header for select all records on a single click Once the delete button is clicked, we will display a alert popup for confirmation . After confirmation the selected records would be removed from Database.
How to Delete Multiple Data in PHP MySQL using JavaScript
1-Creating Database
- Open Phpmyadmin in your Browser
- Click on Database Tab Display on Top side
- Give the Database name “demo”.
- After Creating Database Open it.
- Click on SQL Tab on Top area
- Copy the Below Source Code and paste it.
- Then Click on Go.
-- phpMyAdmin SQL Dump -- version 3.3.9 -- http://www.phpmyadmin.net -- -- Host: localhost -- Generation Time: Jul 31, 2015 at 06:10 AM -- Server version: 5.5.8 -- PHP Version: 5.3.5 SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8 */; -- -- Database: `demo` -- -- -------------------------------------------------------- -- -- Table structure for table `user` -- CREATE TABLE IF NOT EXISTS `user` ( `id` int(100) NOT NULL AUTO_INCREMENT, `userid` int(100) NOT NULL, `name` varchar(100) NOT NULL, `username` varchar(100) NOT NULL, `email` varchar(100) NOT NULL, `address` varchar(100) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ; -- -- Dumping data for table `user` --
OR Import DB File
After Downloading the source code extract it in your root folder.
- Open Phpmyadmin in your Browser
- Click on Database Tab Display on Top side
- Give the Database name “demo”.
- After Creating Database Open it.
- Click on Import Tab on Top area
- You can Find Db file in Downloaded source code Select it.
- Then Click on Go.
2- Creating Database Connection
After import Database File then next step is creating database connection using php copy the below code and save it is as “db.php”.
$db = mysql_connect('localhost','root','') or die ("Unable to connect to Database Server.");
mysql_select_db ('demo', $db) or die ("Could not select database.");
3- Createing A Form To Insert Data
In this step we will going to create a HTML Simple form to accept data.
<form method="post" name="form" action=""> <table style="border:4px groove red; float:left; margin-left:80px;" cellpadding="4" cellspacing="4"> <tbody> <tr> <td colspan="2" style="text-align:center; font-weight:bold;">Add Employee</td> </tr> <tr> <td> <span style="color:black;">User ID</span> </td> <td> <input name="userid" style="font-size:15px;" placeholder="User ID..." type="text" id="userid" required /> </td> </tr> <tr> <td> <span style="color:black;">Name</span> </td> <td> <input name="name" style="font-size:15px;" placeholder="Name..." type="text" id="name" required /> </td> </tr> <tr> <td> <span style="color:black;">Username</span> </td> <td> <input name="username" type="text" style="font-size:15px;" placeholder="Username..." id="username" required /> </td> </tr> <tr> <td> <span style="color:black;">Email</span> </td> <td> <input name="email" type="email" style="font-size:15px;" placeholder="Email..." id="email" required /> </td> </tr> <tr> <td> <span style="color:black;">Address</span> </td> <td> <input name="address" style="font-size:15px;" placeholder="Address..." type="text" id="address" required /> </td> </tr> <tr> <td align="center" colspan="2"> <input type="submit" style="color:#fff; background-color:blue; border:2px groove red; border-radius:4px; font-size:15px;" name="submit" value="Add Employee" id="submit" /> </td> </tr> </tbody> </table> </form>
4 – Insert Data into Database using PHP
Next step is send data into database using php below we will show you Insert data source code.
<?php
if(isset($_POST['submit']))
{
$userid=$_POST['userid'];
$name=$_POST['name'];
$username=$_POST['username'];
$email=$_POST['email'];
$address=$_POST['address'];
$id1 = $_SERVER['REMOTE_ADDR'];
$insert=mysql_query("insert into user (userid,name,username,email,address) values ('$userid','$name','$username','$email','$address')");
if($insert)
{
echo "<script>alert('User has been added'); window.location='index.php'</script>";
}
}
if(isset($_POST['delete']))
{
$check=$_POST['check'];
$count=count($check);
for($i=0;$i<$count;$i++){
$del_id = $check[$i];
$delete=mysql_query("delete from user where id='$del_id'") or die(mysql_error());
}
if($delete)
{
echo "<script>alert('User has been deleted'); window.location='index.php'</script>";
}
}
?>
5 – Display Data on Browser From Database and Delete using PHP
In this step we will retrieve data delete from database and display on a page.
<form method="post">
<table border="1" style="border:4px groove red; float:right; margin-right:80px;" cellpadding="0" cellspacing="0" id="container">
<tr align="center">
<td>
<input type="checkbox" onClick="return sel(this);"/> <span>Select All</span>
</td>
<td>
<strong>User ID</strong>
</td>
<td>
<strong>Name</strong>
</td>
<td>
<strong>Username</strong>
</td>
<td>
<strong>Email</strong>
</td>
<td>
<strong>Address</strong>
</td>
</tr>
<?php
$id1 = $_SERVER['REMOTE_ADDR'];
$result=mysql_query("select * from user order by id ASC ") or die(mysql_error());
while($user_info=mysql_fetch_array($result)){
?>
<tr align="center">
<td>
<input type="checkbox" name="check[]" value="<?php echo $user_info['id']; ?>" id="all" />
</td>
<td>
<?php echo $user_info['userid']; ?>
</td>
<td>
<?php echo $user_info['name']; ?>
</td>
<td>
<?php echo $user_info['username']; ?>
</td>
<td>
<?php echo $user_info['email']; ?>
</td>
<td>
<?php echo $user_info['address']; ?>
</td>
</tr>
<?php } ?>
<tr>
<td colspan="6">
<p align="center">
<input type="submit" style="color:#fff; background-color:blue; border:2px groove red; border-radius:4px; font-size:15px;" name="delete" value="Delete" />
</p>
</td>
</tr>
</table>
</form>
6 – Delete Multiple using Javascript
In this step we will validating the checkbox field for select and delete multiple data .
<script language="JavaScript">
function sel(source)
{
checkboxes = document.getElementsByName('check[]');
for(var i in checkboxes)
checkboxes[i].checked = source.checked;
}
</script>
If you facing any type of problem with this source code then you can Download the Complete source code in zip Formate by clicking the below button Download Now otherwise you can send Comment.