blocks|key|587158|text|使用像Ben这样的setTimeout是最好的：https://stackoverflow.com/a/21641295/144665|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|587159|$("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:+'+%2B+$("input[type='text']").val());

++setTimeout(function()+{
++++//+executes+after+the+form+has+been+reset
++++console.log('after+reset:+'+%2B+$("input[type='text']").val());
++},+1);

});|code-block|syntax|javascript|587160|您可能希望将表单选择器的范围缩小到所涉及的特定表单，可能需要一个id。|587161|小提琴证明：http://jsfiddle.net/iambriansreed/Zh5cd/|587162|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/21641295/144665|1|http://jsfiddle.net/iambriansreed/Zh5cd/^0|O|17|0|0|0|0|6|14|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|C|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]]]

Using a setTimeout as Ben does here is best: <a href="https://stackoverflow.com/a/21641295/144665">https://stackoverflow.com/a/21641295/144665</a>

<pre><code>$("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);

});
</code></pre>

You might want to narrow that form selector down to the specific form involved, maybe with an id.

Fiddle Proof: <a href="http://jsfiddle.net/iambriansreed/Zh5cd/" rel="noreferrer">http://jsfiddle.net/iambriansreed/Zh5cd/</a>

blocks|key|587234|text|我不太喜欢将reset事件绑定到reset按钮而不是窗体的想法。可以通过其他方式重置窗体，在这些情况下，您的事件将不会触发。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|587235|相反，将函数绑定到重置事件，但将其放在即时setTimeout中。它将确保表单在调用函数之前被实际重置。|587236|$('form').on('reset',+function(e)
{
++++setTimeout(function()+{+/*+...+*/+});
});|code-block|syntax|javascript|587237|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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.

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

blocks|key|371512|text|更新:使用preventDefault代替return+false。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|371513|$('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
});|code-block|syntax|javascript|371514|http://jsfiddle.net/EYqrX/1/|371515|entityMap|0|LINK|mutability|MUTABLE|url^0|5|E|L|C|0|0|0|S|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Z|8|@]|D|@$9|10|A|11|1|12]]|E|$]]|$1|M|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|L]]]]

Update: use <code>preventDefault</code> instead of <code>return false</code>.

<pre><code>$('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
});
</code></pre>

<a href="http://jsfiddle.net/EYqrX/1/" rel="nofollow">http://jsfiddle.net/EYqrX/1/</a>

blocks|key|371319|text|试一试|type|unstyled|depth|inlineStyleRanges|entityRanges|data|371320|$('your-form').bind('reset',+function()+{
++alert('hi');
});|code-block|syntax|javascript|371321|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

try

<pre><code>$('your-form').bind('reset', function() {
 alert('hi');
});
</code></pre>

blocks|key|587268|text|这里是一个使用onreset事件的示例，该事件与通常使用form元素的onsubmit事件捕获单击submit按钮的方式类似。为了说明起见，添加了onsubmit示例。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|587269|在脚本中：|587270|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;
}|code-block|syntax|javascript|587271|在您的html中：|587272|<form+onsubmit="return+submitForm(this);"+onreset="return+resetForm(this);">
++++<button+type="submit">Save</button>
++++<button+type="reset">Reset</button>
</form>|587273|entityMap^0|7|7|Z|8|21|8|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|11|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|R|$]]

Here an example using the <code>onreset</code> event similar to how you normally use the <code>onsubmit</code> event of the form element to catch clicking on a submit button. The <code>onsubmit</code> example is added for clarification.

In your script:

<pre><code>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;
}
</code></pre>

In your html:

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

blocks|key|371624|text|单击重置按钮时重置显示内容。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|371625|$('.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'));
++++});
});|code-block|syntax|javascript|371626|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Reset the display contents when clicking the reset button.

<pre><code>$('.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'));
 });
});
</code></pre>

blocks|key|587380|text|我最终使用了一个允许我将dom更改链接在一起的promise。这样我就可以确保在重置其他dom内容之前先重置表单，这些内容需要根据表单中的输入进行更改，这也包括重置表单。我并不认为表单重置会失败，所以我没有使用reject函数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|587381|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.
++++});
});|code-block|syntax|javascript|587382|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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:

<pre><code>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) =&gt; resolve(form.reset())).then(() =&gt; {
 //run code here.
 });
});
</code></pre>

blocks|key|587060|text|这会有帮助吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|587061|++$("input[type='reset']").on("click",+function(){
++++alert("the+form+has+been+reset");
++});|code-block|syntax|javascript|587062|链接到jsfiddle：http://jsfiddle.net/sdkTz/1/|offset|length|587063|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/sdkTz/1/^0|0|0|C|S|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

would this help

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

link to jsfiddle: <a href="http://jsfiddle.net/sdkTz/1/" rel="nofollow">http://jsfiddle.net/sdkTz/1/</a>

blocks|key|371430|text|向reset按钮添加一个click事件，并使其如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|371431|function(e)+{
++++setTimeout(function()+{
++++++++//+your+actual+code+here
++++},1);
}|code-block|syntax|javascript|371432|entityMap^0|C|5|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

Add a <code>click</code> event to the reset button, and have it look like this:

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

After clicking an html reset button,

<pre><code>&lt;input type="reset" /&gt;
</code></pre>

I would like to execute some code. How can I do this and ensure that the form was reset prior to doing so?

How to execute code after html form reset with jquery?

在点击html重置按钮之后，<input type="reset" />我想执行一些代码。如何执行此操作并确保表单在执行此操作之前已重置？

问用jquery重置html表单后如何执行代码？
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用jquery重置html表单后如何执行代码？EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用jquery重置html表单后如何执行代码？
EN