PHP ajax Inline Insert

Hi Guys in this Tutorial we are going to learn how to do inline insert using Jquery,AJAX and PHP..
in HTML 5 You can edit table cells by Setting contentEditable attribute as true.
after adding data to it's cells we can pass the cells data to php page via AJAX and Insert cells data
into database..
in this example, we have create an HTML 5 table to add user Information..
let's use the below codes to insert data into database using HTML 5...

Database and Table:

Database : codenair

table name: crud

SQL commands to create table crud:

CREATE TABLE IF NOT EXISTS `crud` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL,
  `email` varchar(50) NOT NULL,
  PRIMARY KEY(id)
) ENGINE=MyISAM AUTO_INCREMENT=42 DEFAULT CHARSET=latin1;

Now use the below codes to perform inline insert
connect.php

<?php
$conn=new mysqli("localhost","root","","codenair");
?>

index.php
use the following codes to create HTML 5 Editable tables cells and display data from database..

<?php
require('connect.php');
?>
<html>
<head>
<title>PHP AJAX InLine Insert</title>
<script src="jquery.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
  <h2>PHP AJAX Inline Insert</h2>
  <table id="add-user">
      <tr>
      <th>Name: </th>
   <td contentEditable="true" data-user="name"></td>
   </tr>
   <tr>
      <th>Email: </th>
   <td contentEditable="true" data-user="email"></td>
   </tr>
  </table>
  <div id="insert">Insert Data</div>
<h2>Display Data</h2>
<table>
<tbody id="result">
   <tr>
      <th>Name</th>
   <th>Email</th>
   </tr>
   <?php
    $result=mysqli_query($conn,"SELECT*FROM crud order by ID ASC");
 if($result){
    while($row=$result->fetch_array()){?> 
   <tr>
      <td><?php echo $row['name'];?></td>
   <td><?php echo $row['email'];?></td>
   </tr>
   <?php }}?>
   </tbody>
</table>
</html>

script.js
use the below Jquery codes to read editable cells data...and send data to insert.php page via ajax. On successful data insert insert.php page will return the newly added row as a response to the ajax call which will be shown to the user.

$(document).ready(function(){
 $("#insert").click(function(){
  action="";
  $("td[contentEditable='true']").each(function(){
   if($(this).text()!=""){
    if(action!=""){
     action +="&";
    }
    action +=$(this).attr("data-user")+"="+$(this).text();
   }
  });
  if(action!==""){
  $.ajax({
   url: "insert.php",
   type: "POST",
   data:action,
   success: function(response){
     $("#result").append(response);
     $("td[contentEditable='true']").text("");
   }
  });
  }
 });
});

insert.php
use the below php codes to insert data into database and show the newly added row to the user.

<?php
require("connect.php");
if(isset($_POST['name'])&&$_POST['email']){
 $name=$_POST['name'];
 $email=$_POST['email'];
 $result=mysqli_query($conn,"INSERT INTO crud(name,email)VALUES('$name','$email')");
 $insert_id=mysqli_insert_id($conn);
 if($result){
   $data=mysqli_query($conn,"SELECT*FROM crud WHERE id='$insert_id'");
   $row=$data->fetch_assoc();
  ?>
     <tr>
     <td><?php echo $row['name'];?></td>
     <td><?php echo $row['email'];?></td>
  </tr>
<?php }
}
?>

style.css
Use the below css codes to prettify your html codes..

 #result {
    border-collapse: collapse;
    width: 40%;
}
 
#result th, td {
 
    padding: 8px;
}
 
#result tr:nth-child(even){background-color: #f2f2f2}
 
#result th {
    background-color: #4CAF50;
    color: white;
}
#add-user td{
 background-color:#FFFFFF;
 border:1px solid green;
 border-radius:4px;
 text-align:left;
 width: 200px;
 padding:5px;
 vertical-align: top;
 }
#insert{
 background-color: #7fb378;
    padding: 5px 10px;
    color: #fff;
    border-radius: 4px;
 cursor:pointer;
 margin:10px 0px 40px;
 display:inline-block;
}

Thank You for visiting..

Latest

Monday, May 28, 2018

PHP ajax Inline Insert