One element that I had to build recently was a auto-saver on a page editor.
As I thought this was a nifty little method in jQuery I built, I thought I’d share it.
This will take all fields in the form, wrap them up in an object and post them with an AJAX query to the url specified.
Full working HTML example available on GitHub:
https://github.com/glynrob/Autosave
I use jQuery for most javascript functions I am trying to do as it cuts out allot of the work for multiple browsers and writing clear code.
So to use jQuery on your site you add either use the jQuery library saved on your server or the Google hosted location.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
So the first thing you need to do is to setup the timer to call a function after 60 seconds.
<script type="text/javascript">
<!--
var t;
$(document).ready(function() {
t = setTimeout("autosave()", 60000); // timer after 60 seconds
});
Now we create the function which will take the content of all fields inside the form ready for posting to your ajax call.
For elements that are an array you have to put a check in place to detect this. In my example I used the input array of “interests”.
function autosave(last)
{
if (typeof t!="undefined") {clearTimeout(t);} // reset timer
var data = new Object();
var interests = new Object();
var interestscount = 0;
$('#myform input,#myform textarea,#myform select').each(function(index) {
if ($(this).is(':submit')){
// ignore submit buttons
} else {
if ($(this).is(':checkbox')){
if ($(this).attr('checked')){
data[$(this).attr('name')] = $(this).val();
} else {
data[$(this).attr('name')] = '0';
}
} else {
if ($(this).attr('name') == 'interests[]'){ // if input is an array
interests[interestscount] = $(this).val();
interestscount = interestscount + 1;
} else { // if normal input
data[$(this).attr('name')] = $(this).val();
}
}
}
data['interests'] = interests;
});
// AJAX CALL ADDED HERE
}
You now replace the // AJAX CALL ADDED HERE with the following ajax code
This call will send all the content in the variable data to the URL you specify which can then save the content on the server side.
I used my ajax response as 1 – success, 2 – user timed out, and all other responses as fails.
$.ajax(
{
type: "POST",
url: "/ajax/autosave",
data: data,
cache: false,
success: function(message)
{
if (message == '1'){ // show success saved
t = setTimeout("autosave()", 60000); // set timer for next autosave
} else if (message == '2'){ // show error
var answer = confirm("Your session has timed out. Please login again to continue")
if (answer){
window.location = "/signin";
}
} else { // an error has occured
t = setTimeout("autosave()", 120000); // set the time for a larger amount
}
//alert(message); // for testing purposes
}
});
Finally you can add your form to the HTML.
This is my example but it does not matter what form fields you have as they will all be posted to the ajax location you specify.
Not any array input values though as these are special cases – i.e. “interests” in my example.
<form method="post" id="myform" action="/saveform"> Name: <input name="name" type="text" value="" /><br /> Address: <textarea name="address"></textarea><br /> Gender: <select name="gender"> <option value="M">Male</option> <option value="F">Female</option> </select><br /> Interests:<br /> 1: <input name="interests[]" type="text" value="" /><br /> 2: <input name="interests[]" type="text" value="" /><br /> 3: <input name="interests[]" type="text" value="" /><br /> 4: <input name="interests[]" type="text" value="" /><br /> 5: <input name="interests[]" type="text" value="" /><br /> Sign up for our newsletter: <input name="signup" type="checkbox" value="1" /><br /> <input name="submit" type="submit" value="Submit" /> </form>
Full working HTML example available on GitHub:
https://github.com/glynrob/Autosave
原文：https://glynrob.com/javascript/autosave/
全代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Example Auto Save</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
<!--
var t;
$(document).ready(function() {
t = setTimeout("autosave()", 6000); // set timer to run every 60 seconds
});
function autosave(last)
{
if (typeof t!="undefined") {clearTimeout(t);} // reset timer
var data = new Object();
var interests = new Object();
var interestscount = 0;
$('#myform input,#myform textarea,#myform select').each(function(index) {
if ($(this).is(':submit')){
// ignore submit buttons
} else {
if ($(this).is(':checkbox')){
if ($(this).attr('checked')){
data[$(this).attr('name')] = $(this).val();
} else {
data[$(this).attr('name')] = '0';
}
} else {
if ($(this).attr('name') == 'interests[]'){ // if input is an array
interests[interestscount] = $(this).val();
interestscount = interestscount + 1;
} else { // if normal input
data[$(this).attr('name')] = $(this).val();
}
}
}
data['interests'] = interests;
});
$.ajax(
{
type: "POST",
url: "autosave.php",
data: data,
cache: false,
success: function(message)
{
//alert(message);
// show success saved
if (message == '1')
{
t = setTimeout("autosave()", 6000); // set timer for next autosave
}
// show error
else if (message == '2')
{
var answer = confirm("Your session has timed out. Please login again to continue")
if (answer) window.location = "/signin";
}
// an error has occured
else
{
t = setTimeout("autosave()", 12000); // set the time for a larger amount
}
//alert(message); // for testing purposes
}
});
}
//-->
</script>
</head>
<body>
Just a normal form with your fields
<form accept-charset="UTF-8" method="post" id="myform" action="/saveform">
Name: <input name="name" type="text" value="" /><br />
Address: <textarea name="address"></textarea><br />
Gender: <select name="gender">
<option value="M">Male</option>
<option value="F">Female</option>
</select><br />
Interests:<br />
1: <input name="interests[]" type="text" value="" /><br />
2: <input name="interests[]" type="text" value="" /><br />
3: <input name="interests[]" type="text" value="" /><br />
4: <input name="interests[]" type="text" value="" /><br />
5: <input name="interests[]" type="text" value="" /><br />
Sign up for our newsletter: <input name="signup" type="checkbox" value="1" /><br />
<input name="submit" type="submit" value="Submit" />
</form>
</body>
</html>
autosave.php
<?php print_r($_POST);