 |
| ajax auto save tutorial/example |
What you need..
first create a database named: testcreate 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.