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

Question

После нажатия кнопки сброса HTML,

<input type="reset" /> 

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

Answer 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 Доказательство: http://jsfiddle.net/iambriansreed/Zh5cd/

Answer 2

попробовать

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

Answer 3

бы эта помощь

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

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

Answer 4

Добавить click событие на кнопку сброса, и он выглядит следующим образом:

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

Answer 5

Update: использовать preventDefault вместо 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/

Answer 6

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

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

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

Answer 7

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

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 
} 

Answer 8

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

В вашем скрипте:

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>