javascript/jquery 在点击时禁用提交按钮，防止重复提交
[英]javascript/jquery disable submit button on click, prevent double submitting
问题描述
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.这真的是我自己无法做到的事情，因为我对 js 的经验很少，而且我真的不知道该怎么做。 THANKS.谢谢。
5 个解决方案
解决方案1
13 已采纳 2012-07-28 23:04:17
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.希望这会有所帮助。
解决方案2
5 2012-07-28 23:06:25
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.也就是说，您还必须在服务器端处理这种双重提交预防。
解决方案3
0 2012-07-29 03:16:14
This will disable all submit buttons and links with the class submit or the attribute data-submit in a form if one is clicked:如果单击一个表单，这将禁用所有提交按钮和带有类提交或属性数据提交的链接：
$(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.如果您只想要某个，请使用 id 而不是 form。 You most probably already knew that, though.不过，您很可能已经知道了。
解决方案4
0 2019-03-27 19:39:42
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.希望这会帮助你。
解决方案5
0 2019-11-14 10:50:52
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.
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.