How to autosave the data on change of input

How to autosave the data on change of input

In this post we are going to learn how to save data automatically in database on specific time interval using Ajax Jquery with PHP and Mysql. This type of functionality you have seen into Wordpress Admin side if you have used Wordpress. If you have used Wordpress CMS, then at Admin side when we have create new post or page then after a specific interval of time it will save as draft our post or page automatically in Database. So our data will safe if we are forget to publish our content and we come after some time then our content will be placed in Database as draft. So, Tthis type of functionality we are going to learn into this post. In this post We will describe you a simple post example. In We have simple form for posting simple article with title and description. When user enter title and description thenafter some time interval post automatically insert into database table. This things happends only after user enter post title and description. In this tutorial if post enter for first time then it insert into database table but if post already inserted then it will update that post data on regular time interval.

Source Code

index.php

<html> 
      <head> 
           <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
           <meta charset="utf-8"> 
           <title>Webslesson Tutorial</title> 
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
      </head> 
      <body> 
           <div class="container"> 
                <br /> 
                <h2 align="center">Auto Save Data using Ajax, Jquery, PHP and Mysql</h2> 
                <br /> 
                <div class="form-group"> 
                     <label>Enter Post Title</label> 
                     <input type="text" name="post_title" id="post_title" class="form-control" /> 
                </div> 
                <div class="form-group"> 
                     <label>Enter Post Description</label> 
                     <textarea name="post_description" id="post_description" rows="6" class="form-control"></textarea> 
                </div>
    <div class="form-group">
     <button type="button" name="publish" class="btn btn-info">Publish</button>
    </div>
                <div class="form-group"> 
                     <input type="hidden" name="post_id" id="post_id" /> 
                     <div id="autoSave"></div> 
                </div> 
           </div> 
      </body> 
 </html> 
 <script> 
 $(document).ready(function(){ 
      function autoSave() 
      { 
           var post_title = $('#post_title').val(); 
           var post_description = $('#post_description').val(); 
           var post_id = $('#post_id').val(); 
           if(post_title != '' && post_description != '') 
           { 
                $.ajax({ 
                     url:"save_post.php", 
                     method:"POST", 
                     data:{postTitle:post_title, postDescription:post_description, postId:post_id}, 
                     dataType:"text", 
                     success:function(data) 
                     { 
                          if(data != '') 
                          { 
                               $('#post_id').val(data); 
                          } 
                          $('#autoSave').text("Post save as draft"); 
                          setInterval(function(){ 
                               $('#autoSave').text(''); 
                          }, 5000); 
                     } 
                }); 
           }           
      } 
      setInterval(function(){  
           autoSave();  
           }, 10000); 
 }); 
 </script>
 


 

save_post.php


 

 <?php  
 $connect = mysqli_connect("localhost", "root", "", "testing");
 if(isset($_POST["postTitle"]) && isset($_POST["postDescription"]))
 {
  $post_title = mysqli_real_escape_string($connect, $_POST["postTitle"]);
  $post_description = mysqli_real_escape_string($connect, $_POST["postDescription"]);
  if($_POST["postId"] != '')  
  {  
    //update post  
    $sql = "UPDATE tbl_post SET post_title = '".$post_title."', post_description = '".$post_description."' WHERE post_id = '".$_POST["postId"]."'";  
    mysqli_query($connect, $sql);  
  }  
  else  
  {  
    //insert post  
    $sql = "INSERT INTO tbl_post(post_title, post_description, post_status) VALUES ('".$post_title."', '".$post_description."', 'draft')";  
    mysqli_query($connect, $sql);  
    echo mysqli_insert_id($connect);  
  }
 }  
 ?>


 

Database

CREATE TABLE IF NOT EXISTS `tbl_post` ( 
  `post_id` int(11) NOT NULL AUTO_INCREMENT, 
  `post_title` text NOT NULL, 
  `post_description` text NOT NULL, 
  `post_status` varchar(15) NOT NULL, 
  PRIMARY KEY (`post_id`) 
 ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

 

For more visit here :- https://www.webslesson.info/2016/03/auto-save-data-using-ajax-jquery-php-and-mysql.html

Or

For more clarity


Please Share this course

Share

It Looks like you have completed your course!! We have created Online series based on the above content. You can give a test and check your skill.




Be a Part of CollegeSpike by giving your precious comment here and help us in improving our content.