我一直在努力寻找“正确”的方法来防止表单的重复提交。 SO 上有很多相关的帖子,但没有一个适合我。下面有两个问题。
这是我的表格
<form method="POST">
<input type="text" name="q"/>
<button class="once-only">Send</button>
</form>
这是我第一次尝试禁用双重提交:
$(document).ready(function(){
$(".once-only").click(function(){
this.disabled = true;
return true;
});
});
这是此处建议的方法:Disable button after post using JS/Jquery 。该帖子建议提交元素必须是输入而不是按钮,但测试两者没有什么区别。您可以使用这个 fiddle 自己尝试:http://jsfiddle.net/uT3hP/
正如您所看到的,这会禁用该按钮,但也会阻止提交表单。在提交元素是按钮和输入元素的情况下。
问题 1:为什么此点击处理程序会停止提交表单?
再搜索一些,我找到了这个解决方案(来自 Why doesn't my form post when I disable the submit button to prevent double clicking? )
if($.data(this, 'clicked')){
return false;
} else{
$.data(this, 'clicked', true);
return true;
}
你可以使用这个 fiddle 来玩这个:http://jsfiddle.net/uT3hP/1/
这确实有效,但是......
问题 2:这是我们能做的最好的事情吗?
我认为这是一件基本的事情。方法 1 不起作用,方法 2 有效,但我不喜欢它,并且感觉必须有一种更简单的方法。
最佳答案
简单有效的解决方案是
<form ... onsubmit="myButton.disabled = true; return true;">
...
<input type="submit" name="myButton" value="Submit">
</form>
来源:here
关于javascript - 禁用提交表单按钮的最简单方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15529836/