在 Chrome 中提交表单后，如何使用 Javascript 禁用按钮？答案

【问题标题】：How can I use Javascript to disable a button after submitting a form in Chrome?在 Chrome 中提交表单后，如何使用 Javascript 禁用按钮？
【发布时间】：2011-07-04 11:47:26
【问题描述】：

我有一个 Web 表单，我想阻止其多次提交。在生产中，这是通过具有onclick="this.disabled=true" 属性的提交按钮来完成的。这样，如果提交了表单然后用户返回（大概是为了“编辑”数据，我们的用户似乎不时想要这样做），提交按钮仍然处于禁用状态。

这在 Firefox、Safari 和 Internet Explorer 中运行良好。然而，在 Chrome 中，禁用似乎在表单提交之前触发，从而防止它发生。为了解决这个问题，我将按钮的 onclick 操作更改为：

this.disabled=true; $('myform').submit()

这会导致表单被提交，但是当我使用 Chrome 的后退按钮返回表单页面时，该按钮不再被禁用。我在提交之前输入表单的值仍然存在，所以我的猜测是 Chrome 必须有选择地重新加载 DOM。

有什么方法可以在 Chrome 中使用 Javascript 来完成我想要的吗？当然，还有其他方法可以解决此问题，但禁用按钮具有非常吸引人的简单性。

我在 Linux 的 Chrome 12.0.742.100 和 MacOS X 的 12.0.742.112 中进行了测试。

【问题讨论】：

您可以先禁用该按钮，然后使用 JavaScript 代码在onload 启用它。
@Shadow 向导 - 结果是如果 javascript 被禁用、不可用或由于某种原因无法正常运行，按钮将不会被启用。
@Rob 可以通过使用<noscript> 标签来修复。
@ShadowWizard：请将此作为答案，以便我们讨论。但它不起作用——除非我遗漏了什么。您是否在 Chrome 中对此进行了测试并发现它有效？我正在使用 12.0.742.100，我应该将其包含在原始问题中（现在将对其进行编辑）。
之所以评论是因为它只是一个想法，没有机会测试它。没有必要发布我们已经知道不正确的答案，或者至少不能解决问题。这就是说，在我看来“后退按钮问题”是我们无法真正解决的问题，您可以只输入消息“请不要使用后退按钮”。

标签： javascript google-chrome

【解决方案1】：

我更喜欢这个

http://jsfiddle.net/mplungjan/sCgZ9/

脚本：

$("form").submit(function() {
  $("#subbut").hide();
  $("#submitted").show();
});

CSS：

#submitted { display:none }

HTML：

<form action="http://www.google.com/" target="_blank">
<input type="submit" id="subbut" /><span id="submitted">Form submitted</span>
</form>

如果你想决定是否显示按钮，你可以设置一个cookie

【讨论】：

【解决方案2】：

考虑改为使用表单的提交来禁用按钮。

无论如何，您应该在服务器上处理这个问题，还有其他方法可以在不使用提交按钮的情况下提交表单。禁用按钮不会阻止用户重新提交表单。

【讨论】：

这会在提交时禁用按钮，但在按下后退按钮后会再次启用该按钮。你测试过这个建议吗？我错过了什么吗？
感谢您的 -1。从您的问题中不清楚您是否希望在用户导航回表单时禁用该按钮。我已经修改了我的答案来解决这个问题。
Rob，经过大量试验和错误，您更新的答案显示了我的发现：似乎没有直接的 Javascript 解决方案来防止重新提交。我需要使用基于 cookie 或数据模型的解决方案。您现在已 +1 并被接受，感谢您编辑您的答案。

【解决方案3】：

使用javascript

    <form name ="myform" method="POST" action="youractionhere" onSubmit="document.getElementById('submit').disabled=true;">
    <input type="submit" name="submit" value="Submit" id="Submit">
    </form>

使用 jQuery

$("form").each(function() {
        $(this).find("button:submit").click(function() {
                if($('input[type="submit"]').hasClass("disabled")) 
                return false; 
                $('input[type="submit"]').addClass("disabled");
                return true; 
        });
});

【讨论】：

【解决方案4】：

我经常这样做

html

<form action="/" method="post">
    <button type="button" class="submit-form" >Save</button>
</form>

javascript

var button = document.querySelector('.submit-form')
button.addEventListener("click", function(){
    this.setAttribute('disabled',true);
    var form = this.closest('form')
    form.submit();
},false);

jquery

$(document).on("click",".submit-form",function(){
    $(this).attr('disabled',true);
    $form = $(this).closest('form');
    $form.submit();
});

【讨论】：