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

javascript/jquery disable submit button on click, prevent double submitting

本文关键字：提交 按钮 jquery javascript      更新时间：2024-04-01

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

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

使用表单元素（如<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>

希望这能有所帮助。

将以下内容添加到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而不是表单。不过你很可能已经知道了。

根据http://api.jquery.com/prop/您可以使用.pr（）函数添加和删除禁用的属性，而不是使用.attr（）和.removeAttr（）函数。

添加属性：

.prop("disabled", true);

删除属性：

.prop("disabled", false);

希望这对你有帮助。

如本文所述（带示例）：

如果您想确保注册的事件只触发一次，您应该使用jQuery的〔one〕〔1〕：

.one（events[，data]，handler）返回：jQuery

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

相关文章：