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

Question

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.

Raisch · Accepted Answer · 2012-07-29T15:45:50.190

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.

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? — inrob, Jul 28 '12 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. — inrob, Jul 28 '12 at 23:42
@bornie - Sorry, i am nearly sleeping. Try my second edit, this works for me. — Raisch, Jul 29 '12 at 00:31
You can still use the first edit. Change `if ( false == submitted )` to `if ( !submitted )`. I'm thinking that will work better. — Shawn31313, Jul 29 '12 at 04: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. — inrob, Jul 29 '12 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. — Andrei Bazanov, Jul 05 '16 at 08:07

Nivas · Answer 2 · 2012-07-28T23:12:10.293

5

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.

edited Jul 28 '12 at 23:12

answered Jul 28 '12 at 23:06

Nivas

18,126
4
62
76

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. – inrob Jul 28 '12 at 23:09
This user is using jquery.. I don't see the need for an onClick attribute, or document.getElementById. – Daedalus Jul 28 '12 at 23:10
@bornie, I have made an edit. It was supposed to be `document.getElementById('` **`submitbutton`** `').disabled` – Nivas Jul 28 '12 at 23:12
@Daedalus 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. – Nivas Jul 28 '12 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. – ClarkeyBoy Jul 28 '12 at 23:20
Shouldn't this use DOM2 events? – Bailey Parker Jul 28 '12 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 – inrob Jul 28 '12 at 23:31

score 0 · Answer 3 · 2012-07-29T03:56:15.503

0

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.

edited Jul 29 '12 at 03:56

answered Jul 29 '12 at 03:16

Well the problem is that if you can see more carefully, the submit button is not within
. It is separated. You think your code is still valid? – inrob Jul 29 '12 at 15:21

score 0 · Answer 4 · answered Mar 27 '19 at 19:39

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.

score 0 · Answer 5 · answered Nov 14 '19 at 10:50

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.

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

5 Answers5

Linked