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

Question

我在表单末尾添加了一个提交按钮。

我已经给提交按钮添加了以下条件：

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

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

- maas

---

这可能不是你展示的调用的错误。请展示完整的表单HTML。 - Pekka

不要使用提交按钮的onclick事件-使用表单的onsubmit事件。否则，您将无法捕获键盘提交。 - Nick

Answer 1

您应该先提交您的表格，然后再更改提交按钮的值：

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

- Andreas Köberle

---

这是最好的答案。有些浏览器不知道在提交表单之前该怎么做，而这个解决方案可以避免这种情况。 - Nathanael

onclick 应该用小写字母。 - MadMaardigan

如果首先触发 HTML5 验证，将无法按预期工作。 - cyrotello

对我来说，'this.disabled=true' 阻止了后端函数的触发，即使它出现在提交之后！为了解决这个问题，我实现了一个布尔值和 if 语句来检查第一次或后续点击，并返回 false 以进行后续操作。 - Radderz

在使用ASP.NET Update Panel时，我禁用了提交行为。'OnClick="btnSave_Click" OnClientClick="this.disabled=true; this.value='Saving ... Please Wait.';" UseSubmitBehavior="false"' - Muhammad Ali

Answer 2

可能您正在提交表单两次。 删除 this.form.submit() 或在末尾添加 return false。

最终应该得到 onClick="this.disabled=true; this.value='发送中...';"

- migajek

---

请注意，这种方法在IE8和Chrome中不起作用...... 它会按照脚本指示执行操作，但它的结果是禁用了表单的提交功能。 - Shawn de Wet

请查看@andreaskoberle的答案。 - Shawn de Wet

将button type=submit标签中的this.value替换为this.innerText。 - Edgar Ortega

@Andreas Köberle的下面的回答更好，特别是在使用任何ASP.NET框架时。 - Kevin Finck

2022年了，这个解决方案在Chrome 102.0.5005.115上完美运行。 - WiiLF

Answer 3

在IE11、FF53和GC58上进行了测试：

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

- user8161358

---

这个应该被接受；其他人没有提交表格。 - Damien Romito

这个很好用，但是我怎么在点击时改变“value”？ - robert0

Answer 4

你需要在 <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属性的表单元素，那么这种方式将起作用。

- A-Sharabiani

Answer 5

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

克服此问题的一种方法是使用隐藏的表单元素。

- AlexV

Answer 6

技巧在于延迟按钮禁用，然后提交表单，你可以使用 window.setTimeout('this.disabled=true',0); 即使是0毫秒也可以正常工作。

- Frenchi In LA

---

但是如果用户在那一瞬间按下按钮呢？ - jospratik

Answer 7

使用JQuery，您可以这样做...

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

- Manie

---

请勿使用“警报”来实现此功能，因为它们会阻塞页面，直到被点击才能关闭。 - Edgar Ortega

Answer 8

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

- user3060544

Answer 9

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

- BalusC

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" />

- stephen.hanson

---

我喜欢这个解决方案，因为它遵循“不要重复自己”（DRY）原则。一旦添加了第一个代码块，您只需使用类就可以简单地重复使用它。 - Calabacin