Question

我试图阻止表单两次提交。我通过点击提交按钮并在表单提交在后台继续时禁用它来实现这一点。

以下是我使用的代码的基本示例：

$("button").click(function(){
    $(this).attr("disabled","true").html("Wait here while posted...");
});

工作示例： http://jsfiddle.net/t93Vw/

这在firefox和IE中完美运行，但在chrome中，表单未提交。为什么这种行为不同，有没有人快速解决？

Answer 1

如果您想提交表单，则应使用onsubmit事件：

$("form").submit(function () {
    $(':submit', this).prop("disabled", true).html("Wait here while posted...");
});

onclick用于点击，表单有一个特殊的提交事件。优点是它将在Enter key submit上正常运行。

演示：http://jsfiddle.net/t93Vw/1/

Answer 2

尝试.prop( propertyName, value )并且不要在引号

中包裹true

value 类型：字符串或数字或布尔值为属性设置的值。

$("button").click(function (e) {
    e.preventDefault(); //stop default behavior of form submit
    $(this).prop("disabled", true) // disable button
        .text("Wait here while posted...") //change text of button 
        .closest('form').submit();//find closest form and submit it
});

.closest()

event.preventDefault()

Fiddle Demo

Answer 3

按钮的类型可能是原因...试试这个

<form action="/test" method="post">
    <input type="text" name="somefield"/>
    <button id="submitbutton">Send</button>
</form>


$("button").click(function(){
    $(this).prop("disabled",true).html("Wait here while posted...")
       .parent().get(0).submit();
    e.preventDefault();
});

Answer 4

不太确定错误是什么，但这可能会有所帮助？

$("button").click(function(e){
    e.preventDefault();
    $(this).attr("disabled","true").html("Wait here while posted...");
});

Answer 5

要使其在Chrome上运行，请在代码中执行以下更新：

（1）你的表格

<form action="/test" method="post" id="myForm">
  <input type="text" name="somefield"/>
  <button id="submitbutton" type="submit">Send</button>
</form>

（2）使用jquery提交表单：

$("button").click(function(){ 
  $('form#myForm').submit();
  $(this).attr("disabled","true").html("Wait here while posted...");
});

Jquery表单提交按钮（chrome问题）

5 个答案: