javascript - 在更改任何表单值时保存表单

Question

这就是我目前每 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>

Answer 1

正如其他评论所建议的，您最好的选择是监听表单中任何输入元素触发的 input 和 change 事件。只需将此事件监听器绑定(bind)到 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));

上面的代码消除了更改和输入事件的抖动，因此表单数据仅每秒发送一次。要确定 debounce 或 throttle 是否更适合你，请查看这个非常酷的可视化:http://demo.nimius.net/debounce_throttle/