javascript/jquery在单击时禁用提交按钮，防止双重提交_Javascript_Jquery_Double Submit Prevention

javascript/jquery在单击时禁用提交按钮，防止双重提交

javascript jquery

javascript/jquery在单击时禁用提交按钮，防止双重提交,javascript,jquery,double-submit-prevention,Javascript,Jquery,Double Submit Prevention,所以我有一个提交按钮，看起来像这样： <a href="#" id="submitbutton" onClick="document.getElementById('UploaderSWF').submit();"> <img src="../images/user/create-product.png" border="0" /></a> 谢谢你们。我感谢你的帮助。这确实是我自己无法做到的事情因为我对js有一点经验，我真的不知道怎么做做一些事情。

所以我有一个提交按钮，看起来像这样：

<a href="#" id="submitbutton" 
onClick="document.getElementById('UploaderSWF').submit();">
<img src="../images/user/create-product.png" border="0" /></a>

谢谢你们。我感谢你的帮助。这确实是我自己无法做到的事情因为我对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>

使用表单元素（如

）提交表单而不是普通链接

这个很好用

请查看以提交您的表格

祝你好运

编辑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();"

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

这将禁用所有提交按钮和与类提交或表单中属性数据提交相关的链接（如果单击其中一个）：

$(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而不是表单。不过，你很可能已经知道了可以使用.prop（）函数而不是.attr（）和.removeAttr（）函数添加和删除禁用的属性

要添加属性，请执行以下操作：

.prop("disabled", true);

.prop("disabled", false);

要删除该属性，请执行以下操作：

.prop("disabled", true);

.prop("disabled", false);

希望这将对您有所帮助。

如建议的那样（附示例）：

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

.one（事件[，数据]，处理程序）返回：jQuery

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

谢谢，我会试试的。服务器端没有问题。我能做到，我知道我不能仅仅依靠js，因为有时用户会禁用浏览器上的javascript支持。。我认为不需要onClick属性或document.getElementById。@bornie，我已经做了编辑。它应该是

document.getElementById（'

submitbutton

'）。已禁用

@Daedalus我不确定他是否在使用jquery提交。他提交表单的代码是

onClick=“document.getElementById（'UploaderSWF'）。submit（）；

。我不确定的另一个片段是否与这种情况有关。@Nivas：不需要检查服务器上是否有双重提交-如果用户禁用JS，表单将不会提交句号！如果有其他方法可以替代禁用JS，那么我同意，服务器端验证将是必要的。但仅此代码就不需要了。您好，Raisch.谢谢你的解决方案。我应用了你的第二个代码，但它没有真正起作用。仍然提交了不止一次。我应该也应用第一个代码块吗？我想你误解了我的意思。我是说，如果单击两次，它仍然提交两次。它不起作用。你还有其他解决方案吗？谢谢。@bornie-对不起，我快睡着了。请尝试我的第二次编辑，这对我有效。您仍然可以使用第一次编辑。将

if（false==submitted）

更改为

if（！submitted）

。我认为这样会更好。我认为您的解决方案是正确的方法。尽管我认为禁用的属性应该发生在window.document.agileUploaderSWF.submit（）和/或document.getElementById（'agileUploaderSWF'）.submit（）之后；所以在它提交后，禁用它以提交两次。你知道如何以它真正有效的方式完成此操作吗。也许我们可以在它提交后隐藏“提交”按钮或类似的操作……你认为如何？谢谢你迄今为止的努力。问题是，如果你能更仔细地查看，提交b按钮不在其中。它是分开的。您认为您的代码仍然有效吗？