在更改表单的任何值时保存表单

Question

这就是我目前每 2 分钟保存一次表单的方式。我想增加它以更频繁地保存，如果它每 2 分钟保存一次，甚至在用户完成任何更改后不久保存一次。

我的表单主要包含 - 收音机、文本区域表单元素，但如果它跟踪所有元素(如果不是大多数(会很好。

关于我该怎么做的任何想法？

<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>

Answer 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 不支持在复选框和单选按钮上触发oninput事件。

缺点是这会导致saveForm非常频繁地触发，因此改进版本将是限制由input/change事件触发的回调，使其不会过度触发。这可以通过使用 jQuery 去抖/节流插件来完成：

// 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/

Answer 2

有很多方法可以做你想实现的目标。我认为一个好的解决方案是添加事件侦听器，当用户与表单交互时，该事件侦听器将在表单上触发。

有了这个，您可以使用setTiemout和clearTiemout.

使用文本区域的keyup和表单其余部分的click，这将为保存功能设置一秒的超时。如果用户在函数运行之前触发其他事件，则超时将清除并重置。

希望这对:)有所帮助

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">