Javascript 使用jquery重置html表单后如何执行代码？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10319289/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to execute code after html form reset with jquery?
提问by Brian David Berman
After clicking an html reset button,
单击 html 重置按钮后，
<input type="reset" />
I would like to execute some code. How can I do this and ensure that the form was reset prior to doing so?
我想执行一些代码。我怎样才能做到这一点并确保在这样做之前重置表单？
回答by Ben Fleming
I don't particularly like the idea of binding the reset event to the reset button instead of the form. A form can be reset by other means and in those cases your event will not trigger.
我不是特别喜欢将重置事件绑定到重置按钮而不是表单的想法。可以通过其他方式重置表单，在这些情况下，您的事件不会触发。
Instead, bind the function to the reset event but place it within an instantaneous setTimeout. It will ensure the form is actually reset prior to calling the function.
相反，将函数绑定到重置事件，但将其放置在瞬时 setTimeout 内。它将确保在调用函数之前实际重置表单。
$('form').on('reset', function(e)
{
setTimeout(function() { /* ... */ });
});
回答by iambriansreed
Using a setTimeout as Ben does here is best: https://stackoverflow.com/a/21641295/144665
最好像 Ben 那样使用 setTimeout：https: //stackoverflow.com/a/21641295/144665
$("input[type='text']").val('Hello Everybody!');
$("input[type='reset']").closest('form').on('reset', function(event) {
// executes before the form has been reset
console.log('before reset: ' + $("input[type='text']").val());
setTimeout(function() {
// executes after the form has been reset
console.log('after reset: ' + $("input[type='text']").val());
}, 1);
});
You might want to narrow that form selector down to the specific form involved, maybe with an id.
您可能希望将该表单选择器缩小到所涉及的特定表单，可能带有一个 id。
Fiddle Proof: http://jsfiddle.net/iambriansreed/Zh5cd/
回答by IgniteCoders
The suggestion is that instead of using <input type='Reset'>use <input type = "button">in this way you do not have to stop the default behaviour of the resetbutton. You simply have to add the onclickattribute to the button and in the function you could call the form's reset method where ever you wish and control the behaviour as you wish. The following code illustrates that
建议是，不要以这种方式使用<input type='Reset'>use ，而<input type = "button">不必停止reset按钮的默认行为。您只需将onclick属性添加到按钮，在函数中，您可以随时调用表单的重置方法，并根据需要控制行为。下面的代码说明了
HTML:
HTML：
<input type="button" value="Limpiar" onclick="resetForm(this);"/>
JavaScript:
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
}
回答by Mike Mertsock
Update: use preventDefaultinstead of return false.
更新：使用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
});
回答by Wilt
Here an example using the onresetevent similar to how you normally use the onsubmitevent of the form element to catch clicking on a submit button. The onsubmitexample is added for clarification.
这是一个使用onreset事件的示例，类似于您通常如何使用onsubmit表单元素的事件来捕捉点击提交按钮。的onsubmit例子是添加用于澄清。
In your 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;
}
In your html:
在你的 html 中：
<form onsubmit="return submitForm(this);" onreset="return resetForm(this);">
<button type="submit">Save</button>
<button type="reset">Reset</button>
</form>
回答by Logue
Reset the display contents when clicking the reset button.
单击重置按钮时重置显示内容。
$('.custom-file-input').on('change', function(){
const $label = $(this).next('.custom-file-label');
const fileName = $(this).val().split('\').pop();
$label.data('default', $label.html());
$label.addClass('selected').html(fileName);
});
$('form').on('reset', function(){
$('.custom-file-input').each(function(){
const $label = $(this).next('.custom-file-label');
$label.html($label.data('default'));
});
});
回答by stepquick
I ended up using a promise to allow me to chain dom changes together. That way I can ensure the form is reset first, before resetting other dom stuff which needs to change based on input in the form, which includes resetting the form too. I don't necessarily expect the form reset to fail, so I don't use the reject function:
我最终使用了一个 promise 来允许我将 dom 更改链接在一起。这样我可以确保首先重置表单，然后再重置需要根据表单中的输入更改的其他 dom 内容，其中也包括重置表单。我不一定希望表单重置失败，所以我不使用拒绝功能：
const form = document.getElementById("saveForm");
const resetBtn = form.querySelector("button[type=reset]");
resetBtn.addEventListener("click", function overrideReset(e) {
e.preventDefault();
return new Promise((resolve, reject) => resolve(form.reset())).then(() => {
//run code here.
});
});
回答by Dominic
try
尝试
$('your-form').bind('reset', function() {
alert('hi');
});
回答by DG3
would this help
这有帮助吗
$("input[type='reset']").on("click", function(){
alert("the form has been reset");
});
link to jsfiddle: http://jsfiddle.net/sdkTz/1/
链接到 jsfiddle：http: //jsfiddle.net/sdkTz/1/
回答by Niet the Dark Absol
Add a clickevent to the reset button, and have it look like this:
click给重置按钮添加一个事件，让它看起来像这样：
function(e) {
setTimeout(function() {
// your actual code here
},1);
}
