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

问题

So I have the submit button that looks like this:

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

When I double click it double submits obviously, and the problem is that I'm saving the information in the database so I'll have dublicate information there, and I dont want that. This uploader uses flash and javscript and here is a little piece of code that is relevant to the submit thing (if it helps)

$.fn.agileUploaderSubmit = function() {
    if($.browser.msie && $.browser.version == '6.0') {
        window.document.agileUploaderSWF.submit();
    } else {
        document.getElementById('agileUploaderSWF').submit();
        return false;
    }
}

Thank you guys. I appreciate your help. This is really something I was unable to do myself because I have such a little experience with js and I dont really know how to do stuff. THANKS.

回答1:

Try this snipped:

$('#your_submit_id').click(function(){
    $(this).attr('disabled');
});

edit 1

Oh, in your case it is a link and no submit button ...

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

edit 2

To simplify this, try this:

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

Use form elements, like <input type="image" />, to submit a form not a normal link.

This works fine!

Take a look at jQuery.post() to submit your form.

Good luck.

edit 3

This works well for me too:

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

Hopefully this helps.

回答2:

Add the following to the onclick:

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

That said, you will have to handle this double submit prevention on the server side also.

回答3:

According to http://api.jquery.com/prop/ you can be add and remove the disabled property using the .prop() function, not the .attr() and .removeAttr() functions.

To add the property:

.prop("disabled", true);

To remove the property:

.prop("disabled", false);

Hope this will help you.

回答4:

as proposed here (with examples):

if you want to make sure that the registered event is fired only once, you should use jQuery's [one][1] :

.one( events [, data ], handler ) Returns: jQuery

Description: Attach a handler to an event for the elements. The handler is executed at most once per element per event type.

回答5:

This will disable all submit buttons and links with the class submit or the attribute data-submit in a form if one is clicked:

$(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;
        });
    }
});

This automatically applies to every form, by the way. If you just want a certain one, use the id instead of form. You most probably already knew that, though.

来源：https://stackoverflow.com/questions/11705337/javascript-jquery-disable-submit-button-on-click-prevent-double-submitting

标签

javascript

jquery

double-submit-prevention