javascript/jquery 禁用点击提交按钮，防止重复提交答案

【问题标题】：javascript/jquery disable submit button on click, prevent double submittingjavascript/jquery 禁用点击提交按钮，防止重复提交
【发布时间】：2012-07-28 22:59:49
【问题描述】：

所以我的提交按钮看起来像这样：

<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有一点经验，我真的不知道怎么做做事。谢谢。

【问题讨论】：

标签： javascript jquery double-submit-prevention

【解决方案1】：

试试这个截图：

$('#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>

使用表单元素，例如<input type="image" />，提交非普通链接的表单。

这很好用！

查看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>

希望这会有所帮助。

【讨论】：

你好 Raisch。感谢您的解决方案。我应用了您的第二个代码，但它并没有真正起作用。仍然不止一次提交。我也应该应用第一段代码吗？
我想你误解了我的意思。我是说如果点击两次它仍然会提交两次。它不起作用。你心里有没有其他的解决办法？谢谢。
@bornie - 对不起，我快睡着了。尝试我的第二次编辑，这对我有用。
您仍然可以使用第一个编辑。将 if ( false == submitted ) 更改为 if ( !submitted )。我认为这样会更好。
我认为您的解决方案是正确的方法。即使我认为 disabled 属性应该在 window.document.agileUploaderSWF.submit(); 之后发生和/或 document.getElementById('agileUploaderSWF').submit();所以提交后，禁用它提交两次。您是否知道如何以真正有效的方式完成此任务。也许我们可以做一些事情，比如在提交后隐藏提交按钮或类似的事情......你怎么看？不过，感谢您迄今为止所做的努力。

【解决方案2】：

将以下内容添加到onclick：

onclick="document.getElementById('submitbutton').disabled = true;document.getElementById('UploaderSWF').submit();"

也就是说，您还必须在服务器端处理这种双重提交预防。

【讨论】：

谢谢，我会试试的。服务器端没有问题。我可以做到，我知道我不能仅仅依赖 js，因为有时用户会在他们的浏览器上禁用 javascript 支持。
此用户正在使用 jquery。我认为不需要 onClick 属性或 document.getElementById。
@bornie，我进行了编辑。它应该是document.getElementById(' submitbutton ').disabled
@Daedalus 我不确定他是否使用 jquery 提交。他提交表单的代码是onClick="document.getElementById('UploaderSWF').submit();。我不确定的另一个 sn-p 是否与情况有关。
@Nivas: 无需在服务器上检查双重提交 - 如果用户禁用 JS，表单将不会提交句号！如果禁用 JS 时有其他选择，那么我同意，服务器端验证将是必要的。但仅考虑到这段代码，就不需要它了。

【解决方案3】：

如果单击，这将禁用所有提交按钮和与类提交或属性 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;
        });
    }
});

顺便说一句，这会自动应用于每个表单。如果您只想要某个，请使用 id 而不是表单。不过，您很可能已经知道了。

【讨论】：

那么问题是，如果你仔细看，提交按钮不在
中。它是分开的。您认为您的代码仍然有效吗？

【解决方案4】：

根据http://api.jquery.com/prop/ 您可以使用 .prop() 函数添加和删除 disabled 属性，而不是 .attr() 和 .removeAttr() 函数。

添加属性：

.prop("disabled", true);

要删除属性：

.prop("disabled", false);

希望这会对你有所帮助。

【讨论】：

【解决方案5】：

建议here（附示例）：

如果你想确保注册的事件只被触发一次，你应该使用 jQuery 的 [one][1] ：

.one( events [, data ], handler ) 返回：jQuery

描述：将处理程序附加到元素的事件。每个事件类型的每个元素最多执行一次处理程序。

【讨论】：