Disabling the button after once click

Question

I need to disable a button once it's clicked so the user can't click it more than once. (My application is written in MVC ASP.NET, I've done this in a normal ASP.NET application.)

I tried using JavaScript and jQuery and it's not working. The button is getting disabled but the form is not being submitted.

jQuery:

$("#ClickMe").attr("disabled", "disabled");  

JavaScript:

function DisableNextButton(btnId) {     document.getElementById(btnId).disabled = 'true'; } 

Both methods work great, but now the form won't submit.

Answer 1

jQuery now has the .one() function that limits any given event (such as "submit") to one occurrence.

Example:

$('#myForm').one('submit', function() {     $(this).find('input[type="submit"]').attr('disabled','disabled'); }); 

This code will let you submit the form once, then disable the button. Change the selector in the find() function to whatever button you'd like to disable.

Note: Per Francisco Goldenstein, I've changed the selector to the form and the event type to submit. This allows you to submit the form from anywhere (places other than the button) while still disabling the button on submit.

Note 2: Per gorelog, using attr('disabled','disabled') will prevent your form from sending the value of the submit button. If you want to pass the button value, use attr('onclick','this.style.opacity = "0.6"; return false;') instead.

Answer 2

If when you set disabled="disabled" immediately after the user clicks the button, and the form doesn't submit because of that, you could try two things:

//First choice [given myForm = your form]: myInputButton.disabled = "disabled"; myForm.submit()  //Second choice: setTimeout(disableFunction, 1);   //so the form will submit and then almost instantly, the button will be disabled   

Although I honestly bet there will be a better way to do this, than that.