Question

我有一个网页表单，我想要阻止多次提交。在生产中，这是通过具有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。

Answer 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

Answer 2

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

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

Answer 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; 
        });
});

Answer 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();
});

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

4 个答案: