禁止提交表單按鈕提交

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