How To Delete Data in Database Using Ajax With PHP

Project Demo

DATABASE CONNECTION CODE HERE (db.php):

<?php
$host = 'localhost';
$user = 'root';
$pass = '';
$db = 'test';
$conn = mysqli_connect("$host","$user","$pass","$db");
if(!$conn )
{
die('Could not connect: ' . mysql_error());
}
//echo 'Connected successfully';
?>

HTML CODE HERE (index.php):

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container" style="margin-top: 50px;">
<div class="row">
<table class="table">
<tr> <th>Name</th>
<th>Age</th>
<th>Education</th>
<th>Action</th>
</tr>
<?php
include"db.php;
$qry=mysqli_query($conn,"select * from ajaxdemo");
while($row=mysqli_fetch_array($qry)){
<tr>
<td><?php echo $row['name']; ?></td>
<td><?php echo $row['age']; ?></td>
<td><?php echo $row['edu']; ?></td>
<td><a href="#" id="<?php echo $row['id']; ?>" class="delete" title="Delete" style="color:red;"> X</a></td>
</tr>
<div class="result"></div>
<?php } ?>
</table>
</div>
</div>

AJAX AND JAVASCRIPT CODE HERE :

<script type="text/javascript">
$(function() {
$(".delete").click(function(){
var element = $(this);
var del_id = element.attr("id");
var info = 'id=' + del_id;
if(confirm("Are you sure you want to delete this?"))
{
$.ajax({
type: "POST",
url: "delete.php",
data: info,
success: function(data){
$('.result').html(data);
element.remove();
}
});
}
});
});
</script>

DATABASE ROW DELETE PHP CODE HERE (delete.php):

<?php
require "db.php";
$id=$_POST['id'];
$query= "delete from users where id = '$id'";
$result = mysqli_query($conn,$query);
if(!$result)
{
echo "error";
}
else
{
echo "Row Data Has Been deleted";
}
?>

Leave a Reply

Your email address will not be published. Required fields are marked *


Vivzon Web Technology is a small company, But the website is a super-innovative company in the field of development. With 3 years of experience, the website is designing and developing in Mumbai. we aim to bring client cost- Read More

Contact Us


Nallasopara West, Mumbai, India

+91-7240052638

+91-9004837569

info@vivzon.com

Copyright © 2017 vivzon. All rights reserved