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);
相关推荐
很是麻烦 AutoSave是个自动保存剪贴版内容 目前版本只能保存其中的文本信息 的小工具 纯粹是为了提高平时上网查找资料的效率与自娱 并可以根据你的需要快速地在“自动保存”与“手工保存”两种功能之间切换 ">平时...
AutoSave_AutoSave_AutoSave_无标题模型.skp
matlab开发-AUTOSAVE。自动保存基本工作区中的变量。
Atom-atom-autosave-onchange.zip,通过每次更改时自动保存代码来节省时间更改时自动保存,atom是一个用web技术构建的开源文本编辑器。
notepad++ 自动保存插件 1.将与notepad对应位数的插件dll文件,放到notepad目录的plugin目录下 2.在notepad++中,点击设置-导入-导入插件 3.根据提示关闭notepad++并重启 4.在插件栏中多出autosave插件,单机option进行...
AutoSave 插件包内含有 ANSI & Unicode 两个 .dll 文件,放到 X:\Program Files\Notepad++\plugins 目录内即可。重新运行 Notepad++ 后会要求你删除不支持的那一个选是即可。来自小众软件 AutoSave 插件的主要内容...
插件如何工作插件每25秒保存一次内容(可以在Config中定义-autosave_delay),但仅在内容更改时保存。 并且当重新加载编辑器页面并找到自动保存的内容,并且该内容与编辑器加载的内容不同时,系统将询问用户是否应...
您应该有一个目录~/.vim/pack/dist/start/vim-autosave该目录将由Vim自动加载。 用法 安装完成后,请查看:h vim-autosave的帮助(尚不可用)。 这是插件提供的功能的简短概述: 防爆命令: :EnableAutoSave - ...
Auto-Save your content when editing in HTML input and textarea DOM element. http://geniuscarrier.com/autosave-a-jquery-plugin/
jquery.autosave.pack.js ,自动保存的javascript,很好使用。
做地理国情普查的时候,使用ArcGIS的时候,经常遇到ArcGIS死机的情况,如果忘记保存,矢量化过的就要在重新矢量化一回,造成重复工作有时候重复工作的量还很大,就想着开发一个自动保存的工具。
ember-autosave, 在Ember中,支持自动保存模型的对象代理 自动保存 Ember自动保存在你的模型属性设置时定期保存你的模型。安装ember install ember-autosave兼容性如果你在 1.12.0之前使用了Ember版本,你必须使用...
AutoSave Demo 文件
Permanentmotor.slx.autosave
AutoSave_无标题.skp
1、针对有些朋友说不喜欢默认选中“自动保存远程图片”和“去除非本站链接”,现在改成了自动保存你最后一次的选择状态。 2、感谢wowo173发现了“去除非本站链接”会把本站链接也去掉的BUG,现在已修正。
notepad++插件,包含自动保存AutoSave,Json格式化NPPJSONViewer,XMLtools格式化XMLTools,将需要的插件放到plugins下,直接复制notepad_plugins下相应的文件夹即可,需要重启notepad++
自动保存包 当它们失去焦点,被破坏或关闭窗口时,将自动保存编辑器。 默认情况下,此软件包是禁用的,可以通过autosave.enabled配置设置启用,也可以通过在“设置”视图中的autosave软件包的设置中选中“启用”来...
AUTOSAVE 使用计时器对象定期将变量从基础工作区保存到 MAT 文件中。 默认情况下,数据每10分钟保存到matlab.mat中。 用户可定义的选项包括句点(以分钟为单位),MAT文件名以及将传递给SAVE命令的模式。 还可以用 ...
最新版Notepad++8.5.3的64位安装包,常用的AutoSave插件和HexEdit插件,下载不易。