如何禁用提交按钮一旦被点击？

我加入以下条件的提交按钮：

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

如何禁用提交按钮一旦被点击？

回答

相关问题