Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 945
inrob Avatar asked Jul 28 '12 22:07

inrob


People also ask

How can stop double click on submit button in JQuery?

Javascript Codeattr('disabled', true); }); }); As you can see above we have "$this. attr('disabled', true)". This function will help you to disabled the button when clicking but take not after we clicked the button will remain disabled.

How do you disable submit button in JavaScript after clicking it?

1.1 To disable a submit button, you just need to add a disabled attribute to the submit button. $("#btnSubmit"). attr("disabled", true); 1.2 To enable a disabled button, set the disabled attribute to false, or remove the disabled attribute.

How Stop form submit on click of submit button?

We use the preventDefault() method with this event to prevent the default action of the form, that is prevent the form from submitting. Example: HTML.


1 Answers

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.

like image 116
Raisch Avatar answered Oct 11 '22 23:10

Raisch