Question

I am trying to disable a button after it has been clicked so that it cannot be double clicked.

This is what I have:

<input id="btn" type="button" disabled="disabled" value="Log On" onclick="logonDisableSubmitButtons()"/>

And my javascript:

function logonDisableSubmitButtons(clickedButton) {

    $("input[type='button']").each(function() {
      if (this.name != clickedButton)
        $(this).attr("disabled", "disabled");
      else {
        //hiding the actually clicked button
        $(this).hide();
        //Creating dummy button to same like clicked button
        $(this).after('<input type="button" disabled="disabled" value="' + $(this).val() + '" class="' + $(this).attr('class') + '" />');
      }
    });

  }

The button disables but it doesn’t submit the form.

How do I get it to disable after click and then submit the form?

Answer 1

Use a submit input instead of a button input:

<input id="btn" type="submit" disabled="disabled" value="Log On" onclick="logonDisableSubmitButtons()"/>