javascript/jquery 在点击时禁用提交按钮，防止重复提交
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11705337/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript/jquery disable submit button on click, prevent double submitting
提问by inrob
So I have the submit button that looks like this:
所以我有一个看起来像这样的提交按钮：
<a href="#" id="submitbutton"
onClick="document.getElementById('UploaderSWF').submit();">
<img src="../images/user/create-product.png" border="0" /></a>
When I double click it double submits obviously, and the problem is that I'm saving the information in the database so I'll have dublicate information there, and I dont want that. This uploader uses flash and javscript and here is a little piece of code that is relevant to the submit thing (if it helps)
当我双击它时，它显然会双重提交，问题是我将信息保存在数据库中，所以我会在那里有重复的信息，而我不想要那样。这个上传器使用 flash 和 javscript，这里有一小段与提交相关的代码（如果有帮助的话）
$.fn.agileUploaderSubmit = function() {
if($.browser.msie && $.browser.version == '6.0') {
window.document.agileUploaderSWF.submit();
} else {
document.getElementById('agileUploaderSWF').submit();
return false;
}
}
Thank you guys. I appreciate your help. This is really something I was unable to do myself because I have such a little experience with js and I dont really know how to do stuff. THANKS.
谢谢你们。我感谢您的帮助。这真的是我自己无法做到的，因为我对 js 的经验很少，而且我真的不知道该怎么做。谢谢。
回答by Raisch
Try this snipped:
试试这个剪断：
$('#your_submit_id').click(function(){
$(this).attr('disabled');
});
edit 1
编辑 1
Oh, in your case it is a link and no submit button ...
哦，在你的情况下，它是一个链接，没有提交按钮......
var submitted = false;
$.fn.agileUploaderSubmit = function() {
if ( false == submitted )
{
submitted = true;
if($.browser.msie && $.browser.version == '6.0') {
window.document.agileUploaderSWF.submit();
} else {
document.getElementById('agileUploaderSWF').submit();
}
}
return false;
}
edit 2
编辑 2
To simplify this, try this:
为了简化这个，试试这个：
<!doctype html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
$(document).ready(function()
{
$('#yourSubmitId').click(function()
{
$(this).attr('disabled',true);
/* your submit stuff here */
return false;
});
});
//--><!]]>
</script>
</head>
<body>
<form id="yourFormId" name="yourFormId" method="post" action="#">
<input type="image" id="yourSubmitId" name="yourSubmitId" src="yourImage.png" alt="Submit" />
</form>??????????????????????????????????????
</body>
</html>
Use form elements, like <input type="image" />, to submit a form not a normal link.
使用表单元素（如<input type="image" />）提交表单而不是普通链接。
This works fine!
这工作正常！
Take a look at jQuery.post()to submit your form.
看看jQuery.post()来提交你的表单。
Good luck.
祝你好运。
edit 3
编辑 3
This works well for me too:
这对我也很有效：
<!doctype html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
$(document).ready(function()
{
var agileUploaderSWFsubmitted = false;
$('#submitbutton').click(function()
{
if ( false == agileUploaderSWFsubmitted )
{
agileUploaderSWFsubmitted = true;
//console.log( 'click event triggered' );
if ( $.browser.msie && $.browser.version == '6.0' )
{
window.document.agileUploaderSWF.submit();
}
else
{
document.getElementById( 'agileUploaderSWF' ).submit();
}
}
return false;
});
});
//--><!]]>
</script>
</head>
<body>
<form id="agileUploaderSWF" name="agileUploaderSWF" method="post" action="http://your.action/script.php">
<input type="text" id="agileUploaderSWF_text" name="agileUploaderSWF_text" />
</form>??????????????????????????????????????
<a href="#" id="submitbutton"><img src="../images/user/create-product.png" border="0" /></a>??????????????????????????????????????
</body>
</html>
Hopefully this helps.
希望这会有所帮助。
回答by Nivas
Add the following to the onclick:
将以下内容添加到onclick：
onclick="document.getElementById('submitbutton').disabled = true;document.getElementById('UploaderSWF').submit();"
That said, you will have to handle this double submit prevention on the server side also.
也就是说，您还必须在服务器端处理这种双重提交预防。
回答by ileri
This will disable all submit buttons and links with the class submit or the attribute data-submit in a form if one is clicked:
如果单击，这将禁用表单中所有带有类 submit 或属性 data-submit 的提交按钮和链接：
$(document).ready(function() {
$('form').submit(function() {
$(this).find('input[type="submit"]').attr('disabled', true);
$(this).find('a[data-submit], a.submit').click(function() {
return false;
});
}
});
This automatically applies to every form, by the way. If you just want a certain one, use the id instead of form. You most probably already knew that, though.
顺便说一下，这自动适用于每个表单。如果您只想要某个，请使用 id 而不是表单。不过，您很可能已经知道了。
回答by Akanksha Kushwaha
According to http://api.jquery.com/prop/you can be add and remove the disabled property using the .prop() function, not the .attr() and .removeAttr() functions.
根据http://api.jquery.com/prop/，您可以使用 .prop() 函数而不是 .attr() 和 .removeAttr() 函数添加和删除禁用的属性。
To add the property:
添加属性：
.prop("disabled", true);
To remove the property:
要删除属性：
.prop("disabled", false);
Hope this will help you.
希望这会帮助你。
回答by loic.jaouen
as proposed here(with examples):
如建议在这里（举例）：
if you want to make sure that the registered event is fired only once, you should use jQuery's [one][1] :
如果你想确保注册的事件只触发一次，你应该使用 jQuery 的 [one][1] ：
.one( events [, data ], handler ) Returns: jQuery
Description: Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
.one( events [, data ], handler ) 返回：jQuery
描述：将处理程序附加到元素的事件。每个事件类型的每个元素最多执行一次处理程序。
