如何禁用提交按鈕一旦被點擊？

我加入以下條件的提交按鈕：

onClick="this.disabled=true; 
this.value='Sending…'; 
this.form.submit();"

但是，當它移動到下一個頁面，該參數沒有通過和空值傳遞。

來源

2010-07-29 maas

這可能不是您顯示的電話的錯。請顯示錶格的完整HTML。 – 2010-07-29 20:52:25

請勿使用提交按鈕的onclick事件 - 使用表單的onsubmit事件。否則，您將無法從鍵盤上收到提交內容。 – Nick 2010-07-29 21:08:25

也許你提交表單的兩倍。取出this.form.submit()或在末尾添加return false。

你應該結束了onClick="this.disabled=true; this.value='Sending…';"

來源

2010-07-29 20:53:44 migajek

+12

小心，因爲這在IE8和Chrome中不起作用......它的工作原理在於它執行腳本所要做的事情，但結果是它也禁用了表單的提交。 – 2013-03-08 08:58:58

@ShawndeWet：發佈正確的方法 – 2016-01-10 03:59:51

查看@ andreaskoberle的回答 – 2016-01-21 04:59:00

我不認爲你需要this.form.submit()。禁用的代碼應該運行，然後它會傳遞點擊表單的點擊。

來源

2010-07-29 20:52:44

如果你不把「this.form.submit（）」，那麼表單在這種情況下不會提交。 – mchampaneri 2017-08-31 06:15:32

你的問題是混亂的，你真的應該張貼一些代碼，但這應該工作：

onClick="this.disabled=true; this.value='Sending...'; submitForm(); return false;"

我認爲，當你使用this.form.submit()它是做什麼的自然發生當你點擊提交按鈕時。如果你想同頁提交，你應該考慮在上面的submitForm()方法中使用AJAX。

此外，在onClick屬性值的末尾返回false可抑制發射的默認事件（在本例中爲提交表單）。當您提交表單

來源

2010-07-29 20:56:28

殘疾人HTML表單元素沒有與後/獲取值一起發送。因此，如果您單擊禁用了您的提交按鈕，並且此提交按鈕設置了name屬性，則它將不會在post/get值中發送，因爲該元素現在已被禁用。這是正常的行爲。

之一來克服這個問題的方法是使用隱藏的表單元素。

來源

2010-07-29 20:58:28 AlexV

這對我最合適，謝謝！ – Josh 2015-05-18 18:45:16

如果禁用該按鈕，那麼它的名稱=值對將確實不被作爲參數。但是應該發送參數的剩餘部分（只要它們各自的輸入元素和父表單不被禁用）。可能你只是在測試按鈕，或者其他輸入字段，甚至窗體是否被禁用？

來源

2010-07-29 20:58:52 BalusC

你應該先提交表單，然後改變的價值您提交：

onClick="this.form.submit(); this.disabled=true; this.value='Sending…'; "

來源

2010-07-29 20:59:29

這是最好的答案。有些瀏覽器不知道提前提交表單，這個解決方案可以解決這個問題。 – Nathanael 2014-08-12 17:02:12

onclick應該是小寫的 – MadMaardigan 2015-02-05 15:04:54

如果首先觸發HTML5驗證，將無法按預期工作。 – cyrotello 2017-10-05 04:39:50

，關鍵是要延遲按鈕被禁用，並提交您可以使用 window.setTimeout('this.disabled=true',0); 即使是形式0 MS正在

來源

2010-07-29 22:22:51

但是如果用戶在那段時間內按下按鈕怎麼辦？ – jospratik 2013-09-26 07:21:14

哪個部分？即使使用0也可以工作 – 2013-09-27 21:15:17

使用jQuery，你可以做到這一點..

$("#submitbutton").click(
    function() { 
     alert("Sending..."); 
     window.location.replace("path to url"); 
    } 
);

來源

2010-07-30 05:18:41 Manie

謝謝同事 – maas 2010-07-30 06:27:32

另一種解決方案從來就我們ed是移動按鈕而不是禁用它。在這種情況下，你不會有那些「禁用」問題。最後，你真正想要的是人們不要按兩次，如果按鈕不在那裏，他們不能這樣做。

您也可以用另一個按鈕替換它。

來源

2013-07-24 13:53:36


    A better trick, so you don't lose the value of the button is 

    function showwait() { 
    document.getElementById('WAIT').style['display']='inline'; 
    document.getElementById('BUTTONS').style['display']='none'; 
    }

渦卷代碼在一個div顯示

ID = WAIT風格= 「顯示：無」>要顯示的文本（端DIV）

渦卷代碼在一個div隱藏

id = BUTTONS style =「display：inline」> ...按鈕或任何要隱藏的內容
onclick =「showwait（）;」（end div）

來源

2013-10-19 16:51:46 Mike

function xxxx() { 
// submit or validate here , disable after that using below 
    document.getElementById('buttonId').disabled = 'disabled'; 
    document.getElementById('buttonId').disabled = ''; 
}

來源

2013-12-03 08:16:02 user3060544

在我的情況下，這是需要的。

Disable submit button on form submit

它正常工作，在Internet Explorer和Firefox沒有它，但它並沒有在谷歌瀏覽器的工作。

問題是，在它實際上可以觸發提交事件之前，您正在禁用按鈕。

來源

2015-07-23 16:57:49

在回答中顯示相應的代碼，而不只是一個鏈接 – 2015-07-23 17:04:06

下面是一個擴展AndreasKöberle解決方案的示例。它使用jQuery的事件處理程序和文檔準備事件，而是那些可以切換到純JS：

(function(document, $) { 

    $(function() { 
    $(document).on('click', '[disable-on-click], .disable-on-click', function() { 
     var disableText = this.getAttribute("data-disable-text") || 'Processing...'; 

     if(this.form) { 
     this.form.submit(); 
     } 

     this.disabled = true; 

     if(this.tagName === 'BUTTON') { 
     this.innerHTML = disableText; 
     } else if(this.tagName === 'INPUT') { 
     this.value = disableText; 
     } 
    }); 
    }); 

})(document, jQuery);

然後它可以在HTML中使用這樣的：

<button disable-on-click data-disable-text="Saving...">Click Me</button> 
<button class="disable-on-click">Click Me</button> 
<input type="submit" disable-on-click value="Click Me" />

來源

2016-09-08 14:29:27

測試的IE11， FF53，GC58：

onclick="var e=this;setTimeout(function(){e.disabled=true;},0);return true;"

來源

2017-06-14 15:19:20

這與其他工作不同，在GC62上測試。 – TREMOR 2017-11-28 12:29:29

我想簡單的方法來禁用按鈕是:data => { disable_with: "Saving.." } 這將提交一個表單，然後讓一個按鈕禁用，而且它不會禁用按鈕i如果你有任何驗證像required = 'required'.

來源

2017-08-08 09:09:47 chaitanya

我做到了。設置超時時，它可以很好地工作併發送所有值。

$(document).ready(function() { 
     document.getElementById('btnSendMail').onclick = function() { 
      setTimeout(function() { 
       document.getElementById('btnSendMail').value = 'Sending…'; 
       document.getElementById('btnSendMail').disabled = true; 
      }, 850); 
     } 
    });

來源

2018-03-09 01:27:58

如何禁用提交按鈕一旦被點擊？

回答

相關問題