單擊提交按鈕后如何禁用它？

Question

我在表單末尾有一個提交按鈕。

我在提交按鈕中添加了以下條件：

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

但是當它移動到下一頁時，參數沒有傳遞並且傳遞了null個值。

Answer 1

您應首先提交表單，然后更改提交的值：

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

Answer 2

可能你要兩次提交表格。 刪除this.form.submit()或在結尾添加return false 。

你應該以onClick="this.disabled=true; this.value='Sending…';"

Answer 3

在IE11，FF53，GC58上測試：

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

Answer 4

提交表單時，禁用的HTML表單元素不會與發布/獲取值一起發送。 因此，如果您單擊后禁用提交按鈕並且此提交按鈕具有設置的name屬性，則不會在post / get值中發送它，因為該元素現在已禁用。 這是正常行為。

其中一個解決這個問題的方法是使用隱藏的表單元素。

Answer 5

訣竅是延遲按鈕被禁用，並提交你可以使用的窗體window.setTimeout('this.disabled=true',0); 是的，即使有0 MS正在工作

Answer 6

您需要在<form>的onsubmit事件中禁用該按鈕：

<form action='/' method='POST' onsubmit='disableButton()'>
    <input name='txt' type='text' required />
    <button id='btn' type='submit'>Post</button>
</form>

<script>
    function disableButton() {
        var btn = document.getElementById('btn');
        btn.disabled = true;
        btn.innerText = 'Posting...'
    }
</script>

注意：這種方式如果你有一個具有required屬性的表單元素將起作用。

Answer 7

使用JQuery，你可以這樣做..

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

Answer 8

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

Answer 9

我使用的另一個解決方案是移動按鈕而不是禁用它。 在這種情況下，你沒有那些“禁用”問題。 最后你真正想要的是人們不要按兩次，如果按鈕不在那里他們就不能這樣做。

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

Answer 10

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

Answer 11

如果禁用該按鈕，則其名稱=值對確實不會作為參數發送。 但是應該發送參數的殘余（只要它們各自的輸入元素和父形式沒有被禁用）。 您可能只測試按鈕或其他輸入字段甚至表單被禁用？

Answer 12

    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 style =“display：none”>要顯示的文本（結束div）

包裝代碼隱藏在div中

id = BUTTONS style =“display：inline”> ...按鈕或隱藏的內容
的onclick = “showwait（）;” （結束div）

Answer 13

就我而言，這是必要的。

禁用表單提交上的提交按鈕

它沒有它在Internet Explorer和Firefox中正常工作，但它在谷歌瀏覽器中不起作用。

問題是您在實際觸發提交事件之前禁用了該按鈕。

Answer 14

你的問題很混亂，你真的應該發布一些代碼，但這應該有效：

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

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

此外，在onClick屬性值的末尾返回false禁止觸發默認事件（在這種情況下提交表單）。

Answer 15

這是一個擴展了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" />

Answer 16

我認為禁用按鈕的簡單方法是:data => { disable_with: "Saving.." }這將提交一個表單，然后禁用按鈕，如果你有任何驗證，如果required = 'required'. ，它也不會禁用按鈕required = 'required'.

Answer 17

我做了伎倆。 設置超時時，它可以正常工作並發送所有值。

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

Answer 18

在這個工作示例中，用戶在JavaScript中確認他確實想要中止。 如果為true，則禁用該按鈕以防止雙擊，然后運行更新數據庫的代碼。

<asp:button id="btnAbort" runat="server" OnClick="btnAbort_Click" OnClientClick="if (!abort()) {return false;};" UseSubmitBehavior="false" text="Abort" ></asp:button>

我有問題，因為.net可以更改按鈕的名稱

function abort() {
    if (confirm('<asp:Literal runat="server" Text="Do you want to abort?" />')) {
        var btn = document.getElementById('btnAbort');
        btn.disabled = true;
        btn.innerText = 'Aborting...'
        return true;
    }
    else {
        return false;
    }  
}

因為您使用OnClientClick重寫OnClick，即使您的驗證方法成功，后面的代碼也無法正常工作。 這就是為什么你將UseSubmitBehavior設置為false以使其工作

PS：如果您的代碼在vb.net中，則不需要OnClick！

Answer 19

$('form#id').submit(function(e){
//OnClick code 
$(this).children('input[type=submit]').attr('disabled','disabled');
e.preventDefault();
return false;
});

Answer 20

好吧，我做了很多關於如何使這項工作完美的研究。 所以最好的選擇是為禁用按鈕 onclick 創建一個設置超時。現在，當后端運行提交 function 時，問題就出現了。 然后事件堆積在隊列中，每當 javascript "button.disabled == true"被添加到 onclick 事件時，只有第一個動作（即禁用按鈕）被觸發，而不是在后端運行的提交動作（此后端提交 function 可以包含任何內容，例如 $.ajax）。

要在單擊時禁用單個按鈕：

function() { //i always create annonymous function to avoid polluting global 
    space
    var btn = document.getElementsByClassName("btn");
    btn.onclick = function() {
        setTimeout(function() {
            backButton.disabled = true;
        }, 0);
    };
}
}();

此代碼將禁用您的按鈕，並且還會在隊列中運行 function。 timeout = 0 實際上用於觸發后續后端任務。

要禁用屏幕中的所有 btns：

(function() {
    let i, element, list, o;
    element = document.getElementsByClassName("classx");
    if (element) {
        element = element[0];
        list = element.getElementsByTagName("button");
        for (i = 0; i < list.length; i++) {
            o = list[i];
            o.onclick = function() {
                setTimeout(function() {
                    let i;
                    for (i = 0; i < list.length; i++) {
                        list[i].disabled = true;
                    }
                }, 0);
                return true;
            }
        }
    }
})();

這將幫助您禁用頁面中存在的所有按鈕。 （只需根據您的用例使用它。）此外，這個（禁用按鈕）是 settimeout=0 的一個很好的用例，功能描述，因為它將“推遲”調用，直到當前“堆疊的 javascript 事件”完成。

謝謝你，希望這對將來的人有幫助。