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-29 15:45:50Z

12

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.

edited Jul 29, 2012 at 15:45

answered Jul 28, 2012 at 23:04

Raisch

8116 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

inrob Over a year ago

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 Over a year ago

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.

Raisch Over a year ago

@bornie - Sorry, i am nearly sleeping. Try my second edit, this works for me.

Shawn31313 Over a year ago

You can still use the first edit. Change if ( false == submitted ) to if ( !submitted ). I'm thinking that will work better.

inrob Over a year ago

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.

|

Nivas · Accepted Answer · 2012-07-28 23:12:10Z

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, 2012 at 23:12

answered Jul 28, 2012 at 23:06

Nivas

18.4k4 gold badges65 silver badges76 bronze badges

7 Comments

inrob Over a year ago

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.

Daedalus Over a year ago

This user is using jquery.. I don't see the need for an onClick attribute, or document.getElementById.

Nivas Over a year ago

@bornie, I have made an edit. It was supposed to be document.getElementById(' submitbutton ').disabled

Nivas Over a year ago

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

ClarkeyBoy Over a year ago

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

|

score 0 · Accepted Answer · 2012-07-29 03:56:15Z

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, 2012 at 3:56

answered Jul 29, 2012 at 3:16

user1560395

1 Comment

inrob Over a year ago

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?

Akanksha Kushwaha · Accepted Answer · 2019-03-27 19:39:42Z

0

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.

answered Mar 27, 2019 at 19:39

Akanksha Kushwaha

414 bronze badges

Comments

loic.jaouen · Accepted Answer · 2019-11-14 10:50:52Z

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.

answered Nov 14, 2019 at 10:50

loic.jaouen

5446 silver badges9 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

6 Comments

7 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

7 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related