Как выполнить код после html-формы reset с помощью jquery?

Ответ 1

Try:

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

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

     event.preventDefault();
     // stops the form from resetting after this function

     $(this).closest('form').get(0).reset();
     // resets the form before continuing the function

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

 });​

Вам может понадобиться сузить этот селектор формы до определенной формы, связанной с идентификатором.

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

Ответ 2

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

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

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

Ответ 3

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

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

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

Ответ 4

Предполагается, что вместо использования <input type='Reset'> используйте <input type = "button"> таким образом, вам не нужно останавливать поведение кнопки reset по умолчанию. Вам просто нужно добавить атрибут onclick к кнопке и в функции, которую вы могли бы вызвать метод формы reset, где бы вы ни пожелали, и контролировать поведение по своему усмотрению. Следующий код иллюстрирует, что

HTML:

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

JavaScript:

function resetForm(element) {
    //Do what you need before reset the form
    element.form.reset(); //Reset manually the form
    //Do what you need after reset the form
}

Ответ 5

попробовать

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

Ответ 6

Здесь пример, использующий событие onreset, похожее на то, как вы обычно используете событие onsubmit элемента формы, чтобы поймать нажатие кнопки отправки. Для пояснения добавлен пример onsubmit.

В script:

function submitForm(form){
    var xhr = new XMLHttpRequest(),
        data = new FormData(form);

    xhr.open("POST", url, true);
    xhr.onload = function(event) {
        switch (event.target.status){
            case 200:
                onSuccess(event);
                break;
            default:
                onError(event);
        }
    };
    xhr.send(data);
    return false;
}

function resetForm(form){
    var elements = form.elements;
    // set some initial values to those form elements
    return false;
}

В вашем html:

<form onsubmit="return submitForm(this);" onreset="return resetForm(this);">
    <button type="submit">Save</button>
    <button type="reset">Reset</button>
</form>

Ответ 7

поможет ли это

  $("input[type='reset']").on("click", function(){
    alert("the form has been reset");
  });

ссылка на jsfiddle: http://jsfiddle.net/sdkTz/1/

Ответ 8

Добавьте событие click к кнопке reset и сделайте следующее:

function(e) {
    setTimeout(function() {
        // your actual code here
    },1);
}