2014-04-03 86 views
0

我试图阻止表单被提交两次。我这样做是通过捕获点击提交按钮并在表单提交在后台进行时禁用它。jquery表单提交按钮(chrome问题)

下面是我使用的代码的一个非常简单的例子:

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

工作例如: http://jsfiddle.net/t93Vw/

这工作完全在Firefox和IE,但在镀铬的形式没有提交。 为什么这是不同的行为,有没有人有一个快速解决?

+1

它不是在我的Chrome提交。 – Clayton

+0

测试在铬33,最新版本和它的工作(jsfiddle eg) – ronish

+0

@ronish你的意思是它提交的表格,它不应该在chrome33 –

回答

4

如果你想提交表单,那么你应该使用onsubmit事件:

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

onclick是点击,表单有提交的特别活动。优点是它将正确地按Enter键提交。

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

+0

工程就像一个魅力。 – Viezevingertjes

+0

是的,但是可以提供帮助的人,在提交表单时,字段的值不能被修改..在这种情况下,处理提交按钮的点击处理程序提交行为是有用的 – Stphane

+0

谢谢,是的,这是最好的解决方案我认为,“相反”的做法。干杯! 尽管如此,它并不能解释为什么Chrome会以不同于其他浏览器的方式处理它。 – Rob

2

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

类型不裹true:字符串或数值或布尔为属性设置的值。

$("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

+0

,不会提交铬表格 –

1

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

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

'

+0

是的,我的句子很混乱。这个想法是通过执行e.preventDefault()来确保阻止de默认的浏览器行为。 (顺便说我剥离了type属性,因为这里没用) – Stphane

0

不太清楚有什么错误,但也许这将帮助?

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

对于它在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..."); 
});