jQuery防止表单被提交两次并在输入键上答案

【问题标题】：jQuery preventing form from being submited twice and on enter keyjQuery防止表单被提交两次并在输入键上
【发布时间】：2014-07-14 16:52:44
【问题描述】：

我有这个表格：

<form action="/web/events/add" id="EventAddForm" method="post" accept-charset="utf-8">
    <div style="display:none;"><input type="hidden" name="_method" value="POST"/></div> 
    <div class="input text">
        <label for="AddressSearch">Search address</label>
        <input name="adress_search" type="text" id="AddressSearch"/>
    </div>
    <div class="input text required">
        <label for="EventAddress">Address</label>
        <input name="data[Event][address]" type="text" id="EventAddress"/>
    </div>
    <div class="input text required">
        <label for="EventPostNr">Post nr</label>
        <input name="data[Event][post_nr]" type="text" id="EventPostNr"/>
    </div>
    <div class="input text required">
        <label for="EventCity">City</label>
        <input name="data[Event][city]" type="text" id="EventCity"/>
    </div>
    <div class="submit">
        <input onclick="disableSubmit(this)" type="submit" value="Save"/>
    </div>
</form>

还有disableSubmit 函数，它不允许表单提交两次。

   function disableSubmit(b)
   {
      b.disabled = true;
      b.value = 'Saving...';
      b.form.submit();
   }

正在被调用并且没有问题，但是我想包含另一个函数，如果某些字段处于焦点或按下回车键，则不允许提交表单。这里是：

   $("#EventAddForm").submit(function( event ) {
     if ( $("#AddressSearch").is(":focus") ||
        $("#EventPostNr").is(":focus") ||
        $("#EventCity").is(":focus") ||
        event.which == 13){
             event.preventDefault();
       }
     });

在我引入 disableSubmit 函数之前它曾经可以工作，而我现在需要的是获得两个被调用的函数，但就是无法弄清楚。

非常感谢任何帮助或指导。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

在您的输入字段中，将所需的单词粘贴在其中某处，您的函数不是 disableSubmit 应该不再需要被调用。像这样：

<input name="adress_search" type="text" id="AddressSearch" required />

【讨论】：

disableSubmit 用于防止表单被提交两次，而不是用于验证。如果我明白你的意思。
我想我是假设您在提交功能上的 EventAddForm 是出于验证目的，以确保在提交之前填写这些字段？如果这些字段不在焦点上，只允许它提交的原因是什么？
因为这些字段是自动建议的，一旦鼠标点击其中一个建议，就会提交表单。现在这个问题已经解决了，但是一旦输入点击其中一个建议，表单仍然会被提交。
您是否尝试过将“onclick”事件更改为“onsubmit”事件？当您单击建议时，不应触发表单，除非这些输入也发生 onclick 事件...
刚试过onsubmit，但在这种情况下，甚至没有调用disableSUbmit。建议字段也未设置为触发提交，但确实如此。

【解决方案2】：

只保留一个防止多次提交的变量：

jQuery(function($) {
    var submitting = false;

    $("#EventAddForm").submit(function(event) {
        if (submitting) {
            event.preventDefault();
            return;
        }
        submitting = true;
        // rest of code here
    });
});

【讨论】：

我不确定在哪里放置此代码，因为该函数的打开和关闭似乎有点奇怪。我说的对吗？

【解决方案3】：

由于没有任何建议有效，因此我一直在进行研究并找到了对我有帮助的解决方案。希望它对将来的某些人有用。

     var input = document.getElementById('AddressSearch'); 

        google.maps.event.addDomListener(input, 'keydown', function(e) { 
                if (e.keyCode == 13) 
                { 
                        if (e.preventDefault) 
                        { 
                                e.preventDefault(); 
                        } 
                        else 
                        { 
                                // Since the google event handler framework does not handle early IE versions, we have to do it by our self. :-( 
                                e.cancelBubble = true; 
                                e.returnValue = false; 
                        } 
                } 
        });

【讨论】：