disabling button on click stop form from submitting

Question

I'm trying to disable a button after a user clicks it. I have this functionality working great but now the form wont submit... Here is my javascript:

<script>
  $('.button').on('click', function(event) {
    $(this).prop('disabled', true);
  });
</script>

Again this disables the button nicely but now my form wont submit. Is this a well known problem?

Answer 1

Instead of putting it in the click handler, put it in the form's submit handler.

$('form').on('submit', function(event) {
  $(this).find(".button").prop('disabled', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <button class="button">Submit</button>
</form>

Answer 2

Click event occurs before form submit and disabled button prevents submission. This is workaround:

<script>
  $('.button').on('click', function(event) {
    $this=$(this);
    setTimeout(function(){$this.prop('disabled', true);},50);
  });
</script>

Another workaround is to process $('form').on('submit',function(){...});

Edit: ...INSTEAD.