如何執行後的HTML表單重置與jQuery的代碼？

Question

點擊一個HTML復位按鈕後，

<input type="reset" /> 

我想執行一些代碼。我該如何做到這一點，並確保在這樣做之前重置表單？

Answer 1

嘗試：

$("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 

});​ 

你可能想縮小這種形式的選擇到參與的ID的具體形式。

小提琴證明：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

更新：使用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

這裏使用類似於你如何正常使用onsubmit事件onreset事件爲例捕捉單擊提交按鈕的表單元素。爲了澄清，添加了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>