这就是我目前每2分钟保存一次表格的方式。如果每2分钟保存一次以及用户完成任何更改后不久，我希望增加更频繁或更好的保存。
我的表单主要包含 - Radio，Textarea表单元素，但如果它跟踪所有元素（如果不是大多数的话）会很好。
关于我该怎么做的任何想法？
<script>
window.setInterval(saveForm, (1000*60*2)); // 1000 millisecons = 1 sec
function saveForm()
{
var actionurl = document.getElementById("myform").action;
var postdata = $('#myform').serializeArray();
$.ajax({
method: "POST",
url: actionurl,
data: postdata
}).done(function( msg ) {});
}
</script>
HTML
<form action="/myform/complete/15" id="myform" method="post" accept-charset="utf-8">
<div class="view-wrap">
<div class="view-item">
<div class="row">
<div class="col-md-3">
<span style="font-size: 14px;">1. This is first statement for a new assesment.</span>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-3">
<div class="answers_opts_div">
<ul class="list-unstyled" id="answerslist_856">
<li>
<input type="radio" id="answer_radio_856_1" name="answers[856]" value="5" />
<label for="answer_radio_856_1" style="color:#449D44">Strongly Agree</label>
</li>
<li>
<input type="radio" id="answer_radio_856_2" name="answers[856]" value="4" />
<label for="answer_radio_856_2" style="">Agree</label>
</li>
<li>
<input type="radio" id="answer_radio_856_3" name="answers[856]" value="3" />
<label for="answer_radio_856_3" style="">Undecided</label>
</li>
</ul>
</div>
</div>
<div class="col-md-9">
<textarea name="answer_comments[856]" rows="5" data-answerslist="answerslist_856" class="form-control answercomments" placeholder="comment required" style="border-width:4px;"></textarea>
</div>
</div>
</div>
</div>
<div class="view-item">
<div class="row">
<div class="col-md-3">
<span style="font-size: 14px;">1. This is the second statement for a new assesment.</span>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-3">
<div class="answers_opts_div">
<ul class="list-unstyled" id="answerslist_857">
<li>
<input type="radio" id="answer_radio_857_1" name="answers[857]" value="5" />
<label for="answer_radio_857_1" style="color:#449D44">Strongly Agree</label>
</li>
<li>
<input type="radio" id="answer_radio_857_2" name="answers[857]" value="4" />
<label for="answer_radio_857_2" style="">Agree</label>
</li>
<li>
<input type="radio" id="answer_radio_857_3" name="answers[857]" value="3" />
<label for="answer_radio_857_3" style="">Undecided</label>
</li>
</ul>
</div>
</div>
<div class="col-md-9">
<textarea name="answer_comments[857]" rows="5" data-answerslist="answerslist_857" class="form-control answercomments" placeholder="comment required" style="border-width:4px;"></textarea>
</div>
</div>
</div>
</div>
</div>
</form>
答案 0 :(得分：1)
根据其他评论的建议，您最好的选择是收听表单中任何输入元素触发的input和change事件。只需将此事件监听器绑定到saveForm，您应该好好去：
// Save form every 2 minutes
window.setInterval(saveForm, 1000 * 60 * 2);
// Listen to input or change events to save form
// Might want to throttle your callback here
$('#myform :input').on('change input', saveForm);
function saveForm() {
// The rest of your logic
}
同时收听input和change个事件的原因是浏览器兼容性：Internet Explorer does not support firing of oninput event on checkbox and radio buttons。
缺点是这会导致saveForm被非常频繁地触发，因此改进的版本将限制由input / change事件触发的回调，以便它不要过度开火。这可以通过使用jQuery debounce/throttle plugin：
// Listen to input or blur events to save form
// Only fire once every 250ms
$('#myform :input').on('change input', $.debounce(saveForm, 1000));
上面的代码去除了更改和输入事件，因此表单数据每秒只发送一次。要确定去抖或油门是否更适合您，请查看这个非常酷的可视化：http://demo.nimius.net/debounce_throttle/
答案 1 :(得分：0)
有很多方法可以做你想要达到的目标。我认为一个好的解决方案是添加eventlistener，当用户与其交互时，它将在表单上触发。
使用此功能，您可以使用setTiemout和clearTiemout。
对文本区域使用keyup，对表单的其余部分使用click，这将为保存功能设置一秒的超时。如果用户在函数运行之前触发了其他事件，则timeOut将被清除并重置。
希望这会有所帮助：）
function saveForm()
{
console.log('Save');
var actionurl = document.getElementById("myform").action;
var postdata = $('#myform').serializeArray();
$.ajax({
method: "POST",
url: actionurl,
data: postdata
}).done(function( msg ) {});
clearTimeout(inter);
}
var inter = setTimeout(saveForm, (1000));
var form = document.getElementById('myform');
form.addEventListener('click',function(){
clearTimeout(inter);
inter = setTimeout(saveForm, (1000));
});
form.addEventListener('keyup',function(){
clearTimeout(inter);
inter = setTimeout(saveForm, (1000));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/myform/complete/15" id="myform" method="post" accept-charset="utf-8">
<div class="view-wrap">
<div class="view-item">
<div class="row">
<div class="col-md-3">
<span style="font-size: 14px;">1. This is first statement for a new assesment.</span>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-3">
<div class="answers_opts_div">
<ul class="list-unstyled" id="answerslist_856">
<li>
<input type="radio" id="answer_radio_856_1" name="answers[856]" value="5" />
<label for="answer_radio_856_1" style="color:#449D44">Strongly Agree</label>
</li>
<li>
<input type="radio" id="answer_radio_856_2" name="answers[856]" value="4" />
<label for="answer_radio_856_2" style="">Agree</label>
</li>
<li>
<input type="radio" id="answer_radio_856_3" name="answers[856]" value="3" />
<label for="answer_radio_856_3" style="">Undecided</label>
</li>
</ul>
</div>
</div>
<div class="col-md-9">
<textarea name="answer_comments[856]" rows="5" data-answerslist="answerslist_856" class="form-control answercomments" placeholder="comment required" style="border-width:4px;"></textarea>
</div>
</div>
</div>
</div>
<div class="view-item">