Ajax add,view and delete using mysqli

Today i have posted ajax add,view and delete using mysqli. Here i am using php and mysqli to Html form attribute data post database without page refresh. Ajax to convert data in to asynchronous to post and get data response without refresh whole page in website. not only add and delete nowadays everyone using ajax because it's make better user interface in website.

Live demo Download

Database table

Create database and create user table below structure.

CREATE TABLE IF NOT EXISTS `user` (
`id` int(11) NOT NULL,
  `name` varchar(150) NOT NULL,
  `email` varchar(150) NOT NULL,
);

Html

Form id="user_add" - get all form attribute data value in ajax.

data-id="1" - store in data value in form element.

<html>
<body>
<form id="user_add">
    <p>
        <label>Name</label>
        <input name="name" required type="text">
    </p>
    <p>
        <label>Email</label>
        <input name="email" required type="text">
    </p>
    <p>
        <input type="submit" name="submit">
    </p>
</form>
<h3>User information</h3>
<div align="center">
    <table border="1" class="mains">
    <tr>
        <td>Name</td>
        <td>Email</td>
        <td>Action</td>
    </tr>
    <?php
    $db = new mysqli('localhost', 'root', '', '1next2');
    $view_user = $db->query("SELECT * FROM user"); $i=1;
     foreach ($view_user as $key => $users): ?>
    <tr>
        <td><?php echo $users['name'] ?></td>
        <td><?php echo $users['email'] ?></td>
        <td>
            <a data-id="<?php echo $users['id'] ?>" class="delete" href="#">Delete</a>
        </td>
    </tr>
    <?php
    endforeach;
    ?>
    </table>
</div>
</div>
</body>
</html>

Ajax script

$document submit get all user_add table value to post ajax.php page. Ajax asynchronous data to post an other page.

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script>  
  $(document).ready(function(){       
    $(document).on('submit','#user_add',function(){
      var url = "ajax.php";
      $('#logerror').html('<img src="ajax.gif" align="absmiddle"> Please wait...');  
        $.ajax({
        type: "POST",
        url: url,
        data: $("#user_add").serialize(), // serializes the form's elements.
        success: function(data)
        {
             $(".mains").append($(data));
             $('#user_add')[0].reset(); 
        }
     });
    return false;
    });
  });

// Delete database value code


$(document).on('click','.delete',function(){
var element = $(this);
var del_id = element.attr("data-id");
var info = 'id=' + del_id;
if(confirm("Are you sure you want to delete this?"))
{
 $.ajax({
   type: "POST",
   url: "ajax_delete.php",
   data: info,
   success: function(){

 }
});
  $(this).parents("tr").animate({ backgroundColor: "#003" }, "slow")
  .animate({ opacity: "hide" }, "slow");
 }
return false;
});
</script>

Ajax.php

Extract($_POST); - extracting form post value in php

$db - mysqli database connection

<?php 
$db = new mysqli('localhost', 'root', '', '1next2');
if($_POST['name']!="" && $_POST['email']!=""):
    extract($_POST);
    $name=mysqli_real_escape_string($db,$name);
    $email=mysqli_real_escape_string($db,$email);
    $sql = $db->query("INSERT INTO user(name,email) VALUES ('$name','$email')");
    $id  = mysqli_insert_id($db);
    if($sql)
      echo '<tr><td>'.$name.'</td><td>'.$email.'</td>
           <td><a data-id='.$id.' class="delete" href="#">Delete</a></td></tr>';
   endif;
?>

Ajax_delete.php

<?php 
if($_POST['id']!=""):
    extract($_POST);
    $id=mysqli_real_escape_string($db,$id);
    $sql = $db->query("DELETE id FROM user WHERE id='$id'");
endif;
?>

I hope this post helpful you. Thank you for visiting.

5 comments:

Unknown31 August 2015 at 03:48
Really Nice
Anonymous16 October 2016 at 16:59
query("DELETE FROM user WHERE id='$id'");
endif;
?>

little fix
Anonymous23 November 2016 at 00:22
very important.....nice
Anonymous19 October 2017 at 01:41
after new user add, delete function not working, but after page refresh it's working

Menu Link

02 March, 2015