单击提交按钮后如何禁用它？

Question

我在表单末尾有一个提交按钮。

我在提交按钮中添加了以下条件：

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

但是当它移动到下一页时，参数没有传递并且传递了空值。

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

您需要在

的 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 5

当您提交表单时，禁用的 HTML 表单元素不会与 post/get 值一起发送。因此，如果您在单击后禁用提交按钮，并且该提交按钮设置了 name 属性，则它不会在 post/get 值中发送，因为该元素现已禁用。这是正常行为。

解决此问题的方法之一是使用隐藏的表单元素。

Answer 6

诀窍是延迟禁用按钮，然后提交您可以使用的表单
window.setTimeout('this.disabled=true',0);
是的，即使 0 MS 也能工作

Answer 7

使用 JQuery，你可以做到这一点..

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

Answer 8

如果禁用该按钮，则其名称=值对确实不会作为参数发送。但是应该发送剩余的参数（只要它们各自的输入元素和父表单没有被禁用）。您可能只测试按钮或其他输入字段甚至表单被禁用？

Answer 9

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

Answer 10

下面是一个扩展了 Andreas Kö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 11

我认为您不需要 this.form.submit()。禁用代码应该运行，然后它将传递单击表单的单击。

Answer 12

我使用的另一个解决方案是移动按钮而不是禁用它。在这种情况下，您就不会遇到那些“禁用”问题。
最后，您真正想要的是人们不要按两次，如果按钮不存在，他们就无法执行此操作。

您也可以将其替换为其他按钮。

Answer 13

您的问题很混乱，您确实应该发布一些代码，但这应该有效：

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

我认为当您使用 this.form.submit() 时，它会执行单击提交按钮时自然发生的事情。如果您想要同一页面提交，您应该考虑在 submitForm() 方法中使用 AJAX（见上文）。

此外，在 onClick 属性值末尾返回 false 会禁止触发默认事件（在本例中是提交表单）。

Answer 14

 
    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();"
（结束分区）

Answer 15

就我而言，这是需要的。

禁用表单提交上的提交按钮

它在没有它的 Internet Explorer 和 Firefox 中工作正常，但它在 Google Chrome 中不起作用。

问题是您在按钮实际触发提交事件之前禁用了该按钮。

Answer 16

我认为禁用按钮的简单方法是 :data => {disable_with：“正在保存..”}
这将提交一个表单，然后禁用一个按钮，如果您有任何像 required = 'required' 这样的验证，它也不会禁用按钮。

Answer 17

在此工作示例中，用户在 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 18

好吧，我做了很多研究如何让这项工作完美地进行。
因此，最好的选择是创建一个设置超时来禁用按钮 onclick。

现在，当后端运行提交函数时，就会出现问题。然后事件堆积在队列中，每当 javascript "button.disabled == true" 添加到 onclick 事件时，只有第一个操作（即禁用按钮）被触发，而不是提交在后端运行的操作（此后端提交函数可以包含任何内容，例如 $.ajax）。

对于单击时禁用单个按钮：

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

此代码将禁用您的按钮，并且还会在队列上运行该函数。 timeout = 0 实际上用于触发后续后端任务。

用于禁用屏幕中的所有按钮：

(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 事件”完成。

谢谢您，希望这对将来的人有帮助。

Answer 19

我成功了。当设置超时时，它可以正常工作并发送所有值。

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