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

I have a submit button at the end of the form.

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

I have added the following condition to the submit button:

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

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

But when it moves to the next page, the parameters did not pass and null values are passed.

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

16 个解决方案

#1

Probably you're submitting the form twice. Remove the this.form.submit() or add return false at the end.

可能你要两次提交表格。删除this.form.submit（）或在结尾添加return false。

you should end up with onClick="this.disabled=true; this.value='Sending…';"

你应该以onClick =“this.disabled = true; this.value ='发送......';”结束

#2

You should first submit your form and then change the value of your submit:

您应首先提交表单，然后更改提交的值：

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

#3

Disabled HTML forms elements aren't sent along with the post/get values when you submit the form. So if you disable your submit button once clicked and that this submit button have the name attribute set, It will not be sent in the post/get values since the element is now disabled. This is normal behavior.

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

One of the way to overcome this problem is using hidden form elements.

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

#4

tested on IE11, FF53, GC58 :

在IE11，FF53，GC58上测试：

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

#5

the trick is to delayed the button to be disabled, and submit the form you can use window.setTimeout('this.disabled=true',0); yes even with 0 MS is working

诀窍是延迟按钮被禁用，并提交你可以使用的窗体window.setTimeout（'this.disabled = true'，0）;是的，即使0 MS正在工作

#6

I don't think you need this.form.submit(). The disabling code should run, then it will pass on the click which will click the form.

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

#7

Using JQuery, you can do this..

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

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

#8

Your question is confusing and you really should post some code, but this should work:

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

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

I think that when you use this.form.submit() it's doing what happens naturally when you click the submit button. If you want same-page submit, you should look into using AJAX in the submitForm() method (above).

我认为当你使用this.form.submit（）时，它正在做你点击提交按钮时自然发生的事情。如果你想要同页提交，你应该考虑在submitForm（）方法中使用AJAX（上面）。

Also, returning false at the end of the onClick attribute value suppresses the default event from firing (in this case submitting the form).

此外，在onClick属性值的末尾返回false会禁止触发默认事件（在这种情况下提交表单）。

#9

If you disable the button, then its name=value pair will indeed not be sent as parameter. But the remnant of the parameters should be sent (as long as their respective input elements and the parent form are not disabled). Likely you're testing the button only or the other input fields or even the form are disabled?

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

#10

Another solution i´ve used is to move the button instead of disabling it. In that case you don´t have those "disable" problems. Finally what you really want is people not to press twice, if the button is not there they can´t do it.

我使用的另一个解决方案是移动按钮而不是禁用它。在这种情况下，你没有那些“禁用”问题。最后你真正想要的是人们不要按两次，如果按钮不在那里他们就不能这样做。

You may also replace it with another button.

您也可以用其他按钮替换它。

#11

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

#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';
    }
 

wrap code to show in a div

将代码包装在div中显示

id=WAIT style="display:none"> text to display (end div)

id = WAIT style =“display：none”>要显示的文本（结束div）

wrap code to hide in a div

将代码隐藏在div中

id=BUTTONS style="display:inline"> ... buttons or whatever to hide with
onclick="showwait();" (end div)

id = BUTTONS style =“display：inline”> ...按钮或其他隐藏的内容onclick =“showwait（）;” （结束div）

#13

In my case this was needed.

就我而言，这是必要的。

Disable submit button on form submit

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

It works fine in Internet Explorer and Firefox without it, but it did not work in Google Chrome.

它没有它在Internet Explorer和Firefox中正常工作，但它在谷歌浏览器中不起作用。

The problem is that you are disabling the button before it can actually trigger the submit event.

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

#14

Here's a drop-in example that expands on Andreas Köberle's solution. It uses jQuery for the event handler and the document ready event, but those could be switched to plain JS:

这是一个扩展了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);

It can then be used in HTML like this:

然后它可以在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" />

#15

I think easy way to disable button is :data => { disable_with: "Saving.." } This will submit a form and then make a button disable, Also it won't disable button if you have any validations like required = 'required'.

我认为禁用按钮的简单方法是：data => {disable_with：“Saving ..”}这将提交一个表单，然后禁用按钮，如果你有任何验证，如果需要，它也不会禁用按钮='必需”。

#16

I did the trick. When set timeout, it works perfectly and sending all values.

我做了伎俩。设置超时时，它可以正常工作并发送所有值。

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