javascript / jquery禁用提交按钮,防止双重提交
-
13-12-2019 - |
题
所以我有一个如下所示的提交按钮:
<a href="#" id="submitbutton"
onClick="document.getElementById('UploaderSWF').submit();">
<img src="../images/user/create-product.png" border="0" /></a>
.
当我双击时双击它是显然的双重提交,问题是 我正在保存数据库中的信息,因此我将在那里有多晶的信息, 我不想要那个。这个上传者使用Flash和Javscript,这里有一块 与提交相关的代码(如果有帮助)
$.fn.agileUploaderSubmit = function() {
if($.browser.msie && $.browser.version == '6.0') {
window.document.agileUploaderSWF.submit();
} else {
document.getElementById('agileUploaderSWF').submit();
return false;
}
}
.
谢谢人们。 我感谢您的帮助。这真的是我无法做到自己的东西 因为我有js和我真的不知道怎么体验 做东西。 谢谢。
解决方案
尝试此剪辑:
$('#your_submit_id').click(function(){
$(this).attr('disabled');
});
.
编辑1
哦,在您的情况下,它是一个链接,没有提交按钮...
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;
}
.
编辑2
要简化此功能,请尝试:<!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>
.
使用表单元素,如世代odicetagcode,提交表单而不是正常链接。
工作正常!
看看 jquery.post()提交表单。
祝你好运。
编辑3
这对我来说太好了:
<!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>
.
希望这有帮助。
其他提示
将以下内容添加到onclick
:
onclick="document.getElementById('submitbutton').disabled = true;document.getElementById('UploaderSWF').submit();"
.
所说,您还必须在服务器端处理此双倍提交预防。 根据 http://api.jquery.com/prop/ 您可以使用.prop()函数,而不是.attr()和.removeattr()函数来添加和删除禁用属性。
要添加属性:
.prop("disabled", true);
.
要删除属性:
.prop("disabled", false);
.
希望这将为您提供帮助。
如提议这里(有示例):
如果要确保只触发已注册的事件一次,则应使用jQuery的[one] [1]:
.one(事件[,数据],处理程序)返回:jQuery
描述:将处理程序连接到元素的事件。每个事件类型每个元素最多一次执行处理程序。
这将禁用所有提交按钮和链接与类提交或属性数据 - 以表单中的提交,如果单击单击:
$(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;
});
}
});
.
这会通过方式自动适用于每个表单。如果您只想要某个,请使用ID而不是表单。尽管如此,你最可能已经知道了。
不隶属于 StackOverflow