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

Asked 28/7, 2012 at 22:59 Answered 14/11, 2019 at 10:50

Solved javascript jquery double-submit-prevention

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.

Ablaut answered 28/7, 2012 at 22:59 Comment(0)

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.

Colorant answered 28/7, 2012 at 23:4 Comment(6)

Hello Raisch. Thank you for your solution. I applied your second code and it didnt really worked. Still submits more than once. Should I apply the first block of code too? – Ablaut 28/7, 2012 at 23:37

I think you misunderstood me. I'm saying it still submits twice if clicked twice. It doesnt work. Is there any other solution in your mind? Thank you. – Ablaut 28/7, 2012 at 23:42

@bornie - Sorry, i am nearly sleeping. Try my second edit, this works for me. – Colorant 29/7, 2012 at 0:31

You can still use the first edit. Change if ( false == submitted ) to if ( !submitted ). I'm thinking that will work better. – Vaasa 29/7, 2012 at 4:31

I think your solution is the right approach to do it. Even though I think the disabled attribute should take place after window.document.agileUploaderSWF.submit(); and/or document.getElementById('agileUploaderSWF').submit(); so after it submits, disable it to submit twice. Do you have any idea how to accomplish this in a way it really works. Maybe We could do something like hiding the submit button after it submits or something similiar...what do you think? Thank you for your efforts so far though. – Ablaut 29/7, 2012 at 15:26

Sometimes it is not quite as simple. We need to make sure that all the fields are valid before actually disabling the button. Otherwise you could end up with an invalid form and a disabled button. – Congressional 5/7, 2016 at 8:7

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.

Beefy answered 28/7, 2012 at 23:6 Comment(7)

Thanks I will try it. No problem with server side. I can do it, I'm aware that I cannot rely on js only because sometimes users disable javascript support on their browsers. – Ablaut 28/7, 2012 at 23:9

This user is using jquery.. I don't see the need for an onClick attribute, or document.getElementById. – Crosspiece 28/7, 2012 at 23:10

@bornie, I have made an edit. It was supposed to be document.getElementById(' submitbutton ').disabled – Beefy 28/7, 2012 at 23:12

@Crosspiece I am not sure he is using jquery to submit. His code to submit the form is onClick="document.getElementById('UploaderSWF').submit();. The other snippet I am not sure is relevant to the situation. – Beefy 28/7, 2012 at 23:14

@Nivas: No need to check for double submit on the server - if the user disables JS, the form won't submit full stop! If there is an alternative for when JS is disabled then I agree, server side validation will be necessary. But given this code alone it won't be needed. – Stlaurent 28/7, 2012 at 23:20

Shouldn't this use DOM2 events? – Limn 28/7, 2012 at 23:23

Hello. Your solution works sort of partially. When I click submit the second time it tries to connect with the form processor but doesnt succeeds. That isnt really helpful because I want to disable the button (to be unclickable) and let the form submit. I want to totally ignore other clicks. The way it is now, the form simply stucks and doesnt proceed to the other page, that is important because this is how the user is going to find out that the form was submitted. Can you fix something about this one? Thanks – Ablaut 28/7, 2012 at 23:31

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.

Lelialelith answered 29/7, 2012 at 3:16 Comment(1)

Well the problem is that if you can see more carefully, the submit button is not within <form></form>. It is separated. You think your code is still valid? – Ablaut 29/7, 2012 at 15:21

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.

Goldarn answered 27/3, 2019 at 19:39 Comment(0)

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.

Teahan answered 14/11, 2019 at 10:50 Comment(0)

Recommended topics

Hot tags