Ajax add,view and delete using mysqli - Mostlikers

02 March, 2015

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.

Ajax add view and delete using mysqli


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.







4 comments: