如何避免单一输入表单的重复提交？答案

【问题标题】：How to avoid duplicate submission for single input forms?如何避免单一输入表单的重复提交？
【发布时间】：2011-12-10 02:50:02
【问题描述】：

我只有一个输入表单：

<form id="my_form">
  <input id="my_input" type="text" />
</form>

在大多数浏览器中，当用户在这个单一输入中键入文本并点击“输入”时，表单就会被提交。太好了，但我想更进一步，如果用户输入内容并且失去焦点，则提交表单。

我目前已经像这样利用了 jQuery 的 change 事件：

$("my_input").change(function() {
  $("my_form").submit();
});

这适用于我更改输入值并聚焦但如果我更改输入值并点击“输入”然后表单提交两次（一次用于“输入”，一次用于change）。

我开始走低级监听键和管理提交状态的道路，但我想我会把它扔给社区，看看是否有人知道更清洁的方法。

【问题讨论】：

标签： javascript jquery html ruby-on-rails forms

【解决方案1】：

除了容易出错的检查之外，您还可以将提交事件附加到表单。如果值等于旧值，请不要使用ev.preventDefault() 提交表单。

var oldvalue = "";
$("#my_form").submit(function(ev){
    var newvalue = $("#my_input", this).val();
    if(newvalue == oldvalue) ev.preventDefault(); //Same value, cancel submission
    else oldvalue = newvalue;
})

【讨论】：

非常干净的解决方案，我建议用一些标志来控制，但你的要好得多

【解决方案2】：

你试过模糊事件http://api.jquery.com/blur/

这将在输入失去焦点时触发。

【讨论】：

【解决方案3】：

只是对 Rob W 解决方案的改进。

$('#my_form').submit((function () {
   //Enclose variables as to not pollute the global namespace
   var oldValue,
       input = $('#my_input');  //cache your input

   //Same concept as Rob W's solution
   return function (e) {
       var newValue = input.val();

       if(newValue === oldValue) {
          e.preventDefault();
       }

       oldValue = newValue;
   };
})());

【讨论】：