php Ajax Auto Save tutorial - Web Development and Web Design Codes

Latest

Send Email to user for Free No Credit Card Required | Now Send Lot's Of Emails To Your Users Daily For Free!
✓ Free Emails Daily | ✓ Drag & Drop Builder | ✓ Beautiful Email Templates | ✓ Mobile Friendly Emails

Sunday, December 3, 2017

php Ajax Auto Save tutorial

ajax auto save tutorial/example 
Ajax Auto Save tutorial Help of PHP,HTML and CSS Hi Guys Today We will learn how to Create Dynamic Ajax Auto Save System help of MySQL Database.

What you need..

first create a database named: test
create table named: topic
Now use The below SQL Commands to Create a table(topic)
SQL for Creating Table topic
CREATE TABLE IF NOT EXISTS `topic` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `content` longtext NOT NULL,
  `status` varchar(20) NOT NULL,
    PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=6 DEFAULT CHARSET=latin1;

1. index.html
2. script.js
3. autosave.php


1.creating index.html page.
<html>
<head>
<title>AJAX AutoSave Data Using PHP MySQL</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script type="text/javascript" src="script.js"></script>
</head>
<h2>AJAX AutoSave Example</h2>
<form method="POST">
Content:<br/>
<textarea type="text" name="content" id="content" rows="10" cols="40"></textarea>
</form>
<div id="success"></div>
</html>
2.creating script.js file
We will call autosave.php page to save data in database by passing content without refresing page..
$(document).ready(function(){
 $("#content").blur(function(){
  var content=$("#content").val();
  if(content==""){
   alert("Your Content Can not Be Empty");
  }else{
   $.ajax({
    url:"autosave.php",
    type:"POST",
    data:{content:content},
    success: function(data){
     $("#success").html(data);
    }
   });
   return false;
  }
 });
});

3.creating autosave.php file..
<?php
  $conn=new mysqli('localhost','root','','test');
  if(isset($_POST['content'])){
 $content=mysql_real_escape_string($_POST['content']);
 $result=mysqli_query($conn,"INSERT INTO topic(content,status)VALUES('$content','Draft')");
 if($result){
  echo "Your Content Save as Draft";
 }else{
  echo "Sorry Failed to Save Your Content";
 }

  }
?>


Run index page from localhost and write some text then click any where outside of box.. That's all, this is how to create dynamic autosave system using Ajax, PHP and MySQL. You can customize this codes further as per your requirement. feel free to give your comment on this tutorial.
Incoming Search terms: 
#auto save form in php,#javascript autosave form,#jquery autosave textarea,#jquery autosave form to database,#jquery autosave examples,#javascript autosave textarea,

No comments:

Post a Comment

Thank You for Your Comment

Note: Only a member of this blog may post a comment.