How to execute code after html form reset with jquery?

I don't particularly like the idea of binding the reset event to the reset button instead of the form. A form can be reset by other means and in those cases your event will not trigger.

Instead, bind the function to the reset event but place it within an instantaneous setTimeout. It will ensure the form is actually reset prior to calling the function.

$('form').on('reset', function(e)
{
    setTimeout(function() { /* ... */ });
});

Using a setTimeout as Ben does here is best: https://stackoverflow.com/a/21641295/144665

$("input[type='text']").val('Hello Everybody!');

$("input[type='reset']").closest('form').on('reset', function(event) {

  // executes before the form has been reset
  console.log('before reset: ' + $("input[type='text']").val());

  setTimeout(function() {
    // executes after the form has been reset
    console.log('after reset: ' + $("input[type='text']").val());
  }, 1);

});

You might want to narrow that form selector down to the specific form involved, maybe with an id.

Fiddle Proof: http://jsfiddle.net/iambriansreed/Zh5cd/


Update: use preventDefault instead of return false.

$('input[type="reset"]').click(function(evt) {
    // Prevent the reset button from firing the form's reset event again
    evt.preventDefault();
    $(this).closest('form').get(0).reset();
    // At this point your form's inputs should have their values reset
});

http://jsfiddle.net/EYqrX/1/