Question

The regular <input type='reset'> resets the form to its initial document.ready state but does not invoke the change() event of <select> despite the value changed.

I want to force the change event by directly calling $('select').change() but I need to call it after the reset complete, what is the complete() event of the reset button that I should listen to? Is there a “resetcomplete” event on the button?

A 2 year old post on jQuery forums suggest to use a timeout function to delay the .change(). Is there a new way of doing things now?

Answer 1

I could have read this wrong, but are you looking for something similar to:

$(document).on("click", "input[type='reset']", function(){
   $("select").trigger("change");
});

So whenever the user clicks the reset button, you trigger a change event for any selects.

EDIT:

Get the request from the click event and prevent the default behavior, reset the form and then trigger the change:

$(document).on("click", "input[type='reset']", function(e){
  e.preventDefault();
  form = e.toElement.form;
  form.reset();  
  $("select",form).trigger("change");
});

EXAMPLE