I'm trying to prevent users from clicking the button on the page twice, so what I've been doing is hiding that button with jQuery after it's been clicked once. But is there a way instead of hiding that button to disable with jQuery that button after it was clicked once?

I've tried

$(document).ready(function () {
    $('#onClickHideButton').click(function () {
        $(this).prop('disabled', true);
    });
});

but the problem that I'm having with this function is that as soon as the button is clicked it it becomes disabled before it get the chance to submit the form, so the form never gets submitted.

I'm trying to prevent users from clicking the button on the page twice, so what I've been doing is hiding that button with jQuery after it's been clicked once. But is there a way instead of hiding that button to disable with jQuery that button after it was clicked once?

I've tried

$(document).ready(function () {
    $('#onClickHideButton').click(function () {
        $(this).prop('disabled', true);
    });
});

but the problem that I'm having with this function is that as soon as the button is clicked it it becomes disabled before it get the chance to submit the form, so the form never gets submitted.

• javascript
• jquery

• How exactly is your form submitted? Do you have an <input type="submit"> on it, or do you submit it using a function? If the first, you should have no problem. If the latter, just call the function after disabling the button. – Traveling Tech Guy Commented Oct 28, 2013 at 16:59

2 Answers 2

Why not disable the button when the form is submitted, since that's what you actually want to do...

$('#myForm').on('submit', function () {
    $('#myButton').prop('disabled', true);
});

Instead of using a submit button, just use a simple button and send manually the form submit.

<input type="button" id="onClickHideButton" value="Submit"/>

$('#onClickHideButton').click(function () {
     $(this).prop('disabled', true);
     $('#myform').submit();
});

or you could disable the button when the form is submitted

$('#myform').on('submit', function(e) { 
    $('#onClickHideButton').prop('disabled',true);
});