Как выполнить код после сброса HTML-формы с помощью jQuery?

Я не очень люблю идею привязывать событие сброса к кнопке сброса, а не к самой форме. Форму можно сбросить и другими способами, и в этих случаях ваше событие не сработает.

Вместо этого, привяжите функцию к событию reset, но поместите её внутри мгновенного setTimeout. Это обеспечит, что форма действительно будет сброшена перед тем, как будет вызвана функция.

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

Использование setTimeout, как делает Бен в указанном примере, действительно является наилучшим решением. Вот код:

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

$("input[type='reset']").closest('form').on('reset', function(event) {
  
  // выполняется до сброса формы
  console.log('before reset: ' + $("input[type='text']").val());

  setTimeout(function() {
    // выполняется после сброса формы
    console.log('after reset: ' + $("input[type='text']").val());
  }, 1);
});

Таким образом, можно увидеть, что setTimeout с задержкой в 1 мс помогает отделить выполнение кода после сброса формы. Также рекомендую уточнить селектор формы, возможно, добавив идентификатор, чтобы избежать потенциальных проблем с селекцией элементов.

Вот пример на JSFiddle для наглядности: Fiddle Proof.

Обновление: используйте preventDefault, а не return false.

$('input[type="reset"]').click(function(evt) {
    // Предотвращаем срабатывание события сброса формы для кнопки сброса
    evt.preventDefault();
    $(this).closest('form').get(0).reset();
    // На этом этапе значения ваших полей формы должны быть сброшены
});

Ссылка на пример: http://jsfiddle.net/EYqrX/1/

Рекомендуется вместо использования <input type='reset'> применить <input type="button">. Это позволит избежать необходимости останавливать стандартное поведение кнопки сброса. Достаточно добавить атрибут onclick к кнопке, а в функции вы сможете вызвать метод сброса формы в любом месте и контролировать поведение так, как вам нужно. Вот пример кода, который иллюстрирует этот подход:

HTML:

<input type="button" value="Limpiar" onclick="resetForm(this);"/>

JavaScript:

function resetForm(element) {
    // Выполните необходимые действия перед сбросом формы
    element.form.reset(); // Ручной сброс формы
    // Выполните необходимые действия после сброса формы
}

Таким образом, используя кнопку с типом button, вы получаете больше контроля над процессом сброса формы.

Ваш код имеет некоторые нюансы, которые стоит рассмотреть. Чтобы обработчик события reset работал корректно, нужно удостовериться, что вы используете правильный селектор для вашей формы. В jQuery рекомендуется использовать селектор с классом или идентификатором. Вот исправленный пример:

$('#your-form').on('reset', function() {
  alert('hi');
});

Также обратите внимание, что событие reset сработает только тогда, когда форма будет сброшена, например, пользователем, который нажимает кнопку сброса. Если вы хотите прослушивать это событие, убедитесь, что в вашей форме есть соответствующая кнопка или что вы вызываете метод reset().

Кроме того, стоит обратить внимание на правильный синтаксис метода jQuery: вместо bind рекомендуется использовать on, так как это более современный и поддерживаемый подход.