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

How can I use Javascript to disable a button after submitting a form in Chrome?

本文关键字：Javascript 何使用 按钮 Chrome 提交 表单      更新时间：2023-09-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中进行了测试。

我更喜欢这个

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

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

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

使用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; 
        });
});

我用来做这个

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();
});
相关文章：