javascript/jquery 在點擊時禁用提交按鈕，防止重復提交

Question

所以我有一個看起來像這樣的提交按鈕：

<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 的經驗很少，而且我真的不知道該怎么做。 謝謝。

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

希望這會有所幫助。

Answer 2

將以下內容添加到onclick ：

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

也就是說，您還必須在服務器端處理這種雙重提交預防。

Answer 3

如果單擊一個表單，這將禁用所有提交按鈕和帶有類提交或屬性數據提交的鏈接：

$(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 而不是 form。 不過，您很可能已經知道了。

Answer 4

根據http://api.jquery.com/prop/ ，您可以使用 .prop() 函數添加和刪除禁用的屬性，而不是 .attr() 和 .removeAttr() 函數。

添加屬性：

.prop("disabled", true);

要刪除屬性：

.prop("disabled", false);

希望這會幫助你。

Answer 5

如此處所建議的（帶有示例）：

如果你想確保注冊的事件只被觸發一次，你應該使用 jQuery 的 [one][1]：

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

說明：將處理程序附加到元素的事件。 每個事件類型的每個元素最多執行一次處理程序。

javascript/jquery 在點擊時禁用提交按鈕，防止重復提交

問題描述

5 個解決方案

解決方案1
13 已采納 2012-07-28 23:04:17

解決方案2
5 2012-07-28 23:06:25

解決方案3
0 2012-07-29 03:16:14

解決方案4
0 2019-03-27 19:39:42

解決方案5
0 2019-11-14 10:50:52

javascript/jquery 在點擊時禁用提交按鈕，防止重復提交

問題描述

5 個解決方案

解決方案1 13 已采納 2012-07-28 23:04:17

解決方案2 5 2012-07-28 23:06:25

解決方案3 0 2012-07-29 03:16:14

解決方案4 0 2019-03-27 19:39:42

解決方案5 0 2019-11-14 10:50:52

解決方案1
13 已采納 2012-07-28 23:04:17

解決方案2
5 2012-07-28 23:06:25

解決方案3
0 2012-07-29 03:16:14

解決方案4
0 2019-03-27 19:39:42

解決方案5
0 2019-11-14 10:50:52