javascript / jquery禁用提交按钮，防止双重提交

StackOverflow https://stackoverflow.com//questions/11705337

题

所以我有一个如下所示的提交按钮：

<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而不是表单。尽管如此，你最可能已经知道了。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top