禁止提交表单按钮提交

Question

我写了这个代码，以禁用后点击我的网站提交按钮：

$('input[type=submit]').click(function(){ 
    $(this).attr('disabled', 'disabled'); 
}); 

不幸的是，它不会发送形式。我怎样才能解决这个问题？

编辑 我想绑定的提交，而不是形式:)

Answer 1

做它onSubmit()：

​​

正在发生的事情是你之前完全禁用按钮实际上会触发提交事件。

您应该也许应该考虑使用ID或CLASSes命名元素，因此您不会选择页面上所有提交类型的输入。

示范：http://jsfiddle.net/userdude/2hgnZ/

（请注意，我用preventDefault()和return false这样的形式并不实际提交的例子;在使用离开这一关。）

Answer 2

如何禁用提交按钮

只是在onclick事件上调用函数并...返回true以提交，false以禁用提交。 OR 呼叫像的window.onload函数：

window.onload = init(); 

和的init（）做这样的事情：

var theForm = document.getElementById(‘theForm’); 
theForm.onsubmit = // what ever you want to do 

Answer 3

这应该照顾它在你的应用程序。

$(":submit").closest("form").submit(function(){ 
    $(':submit').attr('disabled', 'disabled'); 
}); 

Answer 4

残疾人控件不提交它们的值不知道在帮助如果用户点击保存或删除。

因此，我将按钮值存储在一个隐藏的提交。隐藏的名称与按钮名称相同。我通过button的名称呼叫我的所有按钮。

E.g. <button type="submit" name="button" value="save">Save</button>

基于此，我找到了here。只需将点击的按钮存储在一个变量中。

$(document).ready(function(){ 
    var submitButton$; 

    $(document).on('click', ":submit", function (e) 
    { 
     // you may choose to remove disabled from all buttons first here. 
     submitButton$ = $(this); 
    }); 

    $(document).on('submit', "form", function(e) 
    { 
     var form$ = $(this); 
     var hiddenButton$ = $('#button', form$); 
     if (IsNull(hiddenButton$)) 
     { 
      // add the hidden to the form as needed 
      hiddenButton$ = $('<input>') 
       .attr({ type: 'hidden', id: 'button', name: 'button' }) 
       .appendTo(form$); 
     } 
     hiddenButton$.attr('value', submitButton$.attr('value')); 
     submitButton$.attr("disabled", "disabled"); 
    } 
}); 

这是我的IsNull函数。使用或替代您自己的版本的IsNull或未定义等

function IsNull(obj) 
{ 
    var is; 
    if (obj instanceof jQuery) 
     is = obj.length <= 0; 
    else 
     is = obj === null || typeof obj === 'undefined' || obj == ""; 

    return is; 
} 

Answer 5

具体来说，如果有人在面临的问题的Chrome

你需要做的，解决这个问题是什么是使用的onsubmit标签中的元素设置提交按钮为禁用。这将允许Chrome在按下按钮后立即禁用按钮，并且表单提交仍将继续。

<form name ="myform" method="POST" action="dosomething.php" onSubmit="document.getElementById('submit').disabled=true;"> 
    <input type="submit" name="submit" value="Submit" id="submit"> 
</form> 

Answer 6

正如前面所说的，如果你提交按钮添加禁用属性，数据不会被发送。

从@Valamas诀窍的工作，但我找到了解决办法，这是非常容易实现：

$('#yourform').submit(function(){ 
    $('#mySubmitButton').addClass('disabled'); 
}); 

你在CSS定义禁用类这样的：

.disabled{ 
    cursor:not-allowed; 
} 

这将与disabled =“disabled”相同，但不会对发送的数据造成影响。

Answer 7

简单而有效的解决方案是

<form ... onsubmit="myButton.disabled = true; return true;"> 
    ... 
    <input type="submit" name="myButton" value="Submit"> 
</form> 

来源：here

Answer 8

你的代码实际工作在FF，它无法在Chrome工作。

这适用于FF和Chrome。

$(document).ready(function() { 
     // Solution for disabling the submit temporarily for all the submit buttons. 
     // Avoids double form submit. 
     // Doing it directly on the submit click made the form not to submit in Chrome. 
     // This works in FF and Chrome. 
     $('form').on('submit', function(e){ 
      //console.log('submit2', e, $(this).find('[clicked=true]')); 
      var submit = $(this).find('[clicked=true]')[0]; 
      if (!submit.hasAttribute('disabled')) 
      { 
      submit.setAttribute('disabled', true); 
      setTimeout(function(){ 
       submit.removeAttribute('disabled'); 
      }, 1000); 
      } 
      submit.removeAttribute('clicked'); 
      e.preventDefault(); 
     }); 
     $('[type=submit]').on('click touchstart', function(){ 
      this.setAttribute('clicked', true); 
     }); 
     }); 
    </script> 

Answer 9

更简单的方法。 我试过了，工作很好。 （'：input [type = submit]'）。prop（'disabled'，true）;