0

I want to disable the submit button to prevent double submissions.

To do this, I use jQuery:

jQuery('#subnewtopicform').on('submit', function () {
    jQuery('#subnewtopic').prop('disabled', true);
});

And stripped down HTML:

    <form action="" method="post" id="subnewtopicform">
        <input type="text" name="title" />
        <input type="submit" value="Submit" name="subnewtopic" id="subnewtopic" /> 
    </form>

When clicking submit button, it gets disabled and the page reloads but the form is not submitted, why?! This is a big mystery to me.

10
  • form submit is what causes the page reload... so why do you say it's not submitted? Need to provide more info on what is expected
    – charlietfl
    Jan 7, 2015 at 18:56
  • @charlietfl This is exactly why this is a mystery. It is as if the submit button strips all the data transfered when the form is submitted or something similar...? Jan 7, 2015 at 18:58
  • no, your problem is elsewhere. Is the active page supposed to be the action url for the form?
    – charlietfl
    Jan 7, 2015 at 18:58
  • @charlietfl Yes. I should note that when I remove this very jQuery code, everything works perfectly fine. Jan 7, 2015 at 19:00
  • Change post to get and click on submit, then you see in url if form is submitting the data
    – doniyor
    Jan 7, 2015 at 19:01

2 Answers 2

0

We have massive problems with double-clicking forms, so I use an HTML5 data var with a timer, which basically disables the button for N time. If you set this time very high, it will effectively disable the button from doing anything again without actually disabling the submit button itself.

You can then submit the form with the JS function itself.

    jQuery('#subnewtopicform').on('submit', function (e) {
        e.preventDefault(); 
        //prevent double clicking 
        if (!$(this).data('isClicked')) {
            //store it for later in case of async
            var link = $(this);             

            // Set the isClicked value and set a timer to reset and be re-clickable in 3seconds
            link.data('isClicked', true);
            setTimeout(function() {
                link.removeData('isClicked')
            }, 3000);

           //submit the form with JS
           //your form tag should have action and method on the html for this to go anywhere
           $(this).submit();
        }
        else {
            return false;
        }
    });
2
  • This makes the submit button not function...?= Jan 7, 2015 at 19:22
  • Right, as mentioned, this is designed for using javascript to submit the form. I'll update the answer to be more clear.
    – BReal14
    Jan 7, 2015 at 19:35
0

I use the input's 'onclick' attribute because I can't use jQuery. The onclick is also commonly used to verify data before a form is submitted

<input type="submit" value="Submit" name="subnewtopic" id="subnewtopic" onclick=" return disableButton();" /> 

For your javascript:

<script>
function disableButton() {
var button = document.getElementById('subnewtopic');
button.disabled = true; 
return true;
}
</script>

The return true tells the form to submit after the function is complete.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.