如何使用带有 .reset() 方法的 jQuery 重置表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16452699/
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 reset a form using jQuery with .reset() method
提问by yvonnezoe
I had working code that could reset my form when I click on a reset button. However after my code is getting longer, I realize that it doesn't work anymore.
我有工作代码可以在我单击重置按钮时重置我的表单。但是，在我的代码变长之后，我意识到它不再起作用了。
<div id="labels">
<table class="config">
<thead>
<tr>
<th colspan="4"; style= "padding-bottom: 20px; color:#6666FF; text-align:left; font-size: 1.5em">Control Buttons Configuration</th>
</tr>
<tr>
<th>Index</th>
<th>Switch</th>
<th>Response Number</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<form id="configform" name= "input" action="#" method="get">
<tr><td style="text-align: center">1</td>
<td><img src= "static/switch.png" height="100px" width="108px"></td>
<td id="small"><input style="background: white; color: black;" type="text" value="" id="number_one"></td>
<td><input style="background: white; color: black;" type="text" id="label_one"></td>
</tr>
<tr>
<td style="text-align: center">2</td>
<td><img src= "static/switch.png" height="100px" width="108px"></td>
<td id="small"><input style="background: white; color: black;" type="text" id = "number_two" value=""></td>
<td><input style="background: white; color: black;" type="text" id = "label_two"></td>
</tr>
<tr>
<td style="text-align: center">3</td>
<td><img src= "static/switch.png" height="100px" width="108px"></td>
<td id="small"><input style="background: white; color: black;" type="text" id="number_three" value=""></td>
<td><input style="background: white; color: black;" type="text" id="label_three"></td>
</tr>
<tr>
<td style="text-align: center">4</td>
<td><img src= "static/switch.png" height="100px" width="108px"></td>
<td id="small"><input style="background: white; color: black;" type="text" id="number_four" value=""></td>
<td><input style="background: white; color: black;" type="text" id="label_three"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" id="configsubmit" value="Submit"></td>
</tr>
<tr>
<td><input type="reset" id="configreset" value="Reset"></td>
</tr>
</form>
</tbody>
</table>
</div>
And my jQuery:
还有我的 jQuery：
$('#configreset').click(function(){
$('#configform')[0].reset();
});
Is there some source that I should include in my codes in order for the .reset()method to work? Previously I was using:
为了使该.reset()方法起作用，我应该在代码中包含一些来源吗？以前我使用的是：
<script src="static/jquery.min.js">
</script>
<script src="static/jquery.mobile-1.2.0.min.js">
</script>
and the .reset()method was working.
并且该.reset()方法有效。
Currently I'm using
目前我正在使用
<script src="static/jquery-1.9.1.min.js"></script>
<script src="static/jquery-migrate-1.1.1.min.js"></script>
<script src="static/jquery.mobile-1.3.1.min.js"></script>
Could it possibly be one of the reason?
这可能是原因之一吗？
采纳答案by yvonnezoe
I've finally solve the problem!!
@RobG was right about the formtag and tabletag. the formtag should be placed outside the table.with that,
我终于解决了问题！！@RobG 关于form标签和table标签是正确的。该form标签应放置在表外。接着就，随即，
<td><input type="reset" id="configreset" value="Reset"></td>
works without the need of jquery or anything else. simple click on the button and tadaa~ the whole form is reset ;) brilliant!
无需 jquery 或其他任何东西即可工作。简单地点击按钮，tadaa~整个表格都被重置了;) 太棒了！
回答by SagarPPanchal
回答by FullOnFlatWhite
$('#configreset').click(function(){
$('#configform')[0].reset();
});
Put it in JS fiddle. Worked as intended.
把它放在JS小提琴中。按预期工作。
So, none of the aforementioned issues are at fault here. Maybe you're having a conflicting ID issue? Is the click actually executing?
因此，上述问题都没有错。也许您遇到了 ID 冲突问题？点击是否实际执行？
Edit: (because I'm a sad sack without proper commenting ability) It's not an issue directly with your code. It works fine when you take it out of the context of the page that you're currently using, so, instead of it being something with the particular jQuery/javascript & attributed form data, it has to be something else. I'd start bisecting the code around it out and try to find where it's going on. I mean, just to 'make sure', i suppose you could...
编辑：（因为我是一个没有适当评论能力的悲伤麻袋）这不是你的代码直接的问题。当您将它从当前使用的页面的上下文中取出时，它可以正常工作，因此，它不是具有特定 jQuery/javascript 和属性表单数据的东西，而是其他东西。我会开始将它周围的代码一分为二，并尝试找出它发生的地方。我的意思是，只是为了“确保”，我想你可以……
console.log($('#configform')[0]);
in the click function and make sure it's targeting the right form...
在点击功能中，并确保它的目标是正确的形式...
and if it is, it has to be something that's not listed here.
如果是，则必须是此处未列出的内容。
edit part 2: One thing you could try (if it's not targeting it correctly) is use "input:reset"instead of what you are using... also, i'd suggest because it's not the target that's incorrectly working to find out what the actual click is targeting. Just open up firebug/developer tools, whathave you, toss in
编辑第 2 部分：你可以尝试的一件事（如果它没有正确定位）是使用“输入：重置”而不是你正在使用的......另外，我建议因为它不是错误地找出目标实际点击的目标是什么。只需打开firebug/开发人员工具，你有什么，扔进去
console.log($('#configreset'))
and see what pops up. and then we can go from there.
看看会弹出什么。然后我们可以从那里开始。
回答by Kevin
According to this post here, jQuery has no reset()method; but native JavaScript does. So, convert the jQuery element to a JavaScript object by either using :
根据这里的这篇文章，jQuery 没有reset()方法；但是原生 JavaScript 可以。因此，使用以下任一方法将 jQuery 元素转换为 JavaScript 对象：
$("#formId")[0].reset()
// or
$("#formId").get(0).reset()
回答by Nick F
This is one of those things that's actually easier done in vanilla Javascript than jQuery. jQuery doesn't have a resetmethod, but the HTML Form Element does, so you can reset all the fields in a form like this:
这是在 vanilla Javascript 中比在 jQuery 中更容易完成的事情之一。jQuery 没有reset方法，但 HTML 表单元素有，因此您可以像这样重置表单中的所有字段：
document.getElementById('configform').reset();
If you do this via jQuery (as seen in other answers here: $('#configform')[0].reset()), the [0]is fetching the same form DOM element that you would get directly via document.getElementById. The latter approach is both more efficient and simpler though (since with the jQuery approach you first get a collection and then have to fetch an element from it, whereas with the vanilla Javascript you just get the element directly).
如果您通过 jQuery 执行此操作（如此处的其他答案中所示：）$('#configform')[0].reset()，[0]则获取的表单 DOM 元素与您直接通过document.getElementById. 不过，后一种方法更有效也更简单（因为使用 jQuery 方法，您首先获得一个集合，然后必须从中获取一个元素，而使用 vanilla Javascript，您只需直接获取元素）。
回答by RobG
A reset button doesn't need any script at all (or name or id):
重置按钮根本不需要任何脚本（或名称或 ID）：
<input type="reset">
and you're done. But if you really mustuse script, note that every form control has a formproperty that references the form it's in, so you could do:
你就完成了。但是如果你真的必须使用脚本，请注意每个表单控件都有一个引用它所在表单的表单属性，所以你可以这样做：
<input type="button" onclick="this.form.reset();">
But a reset button is a far better choice.
但是重置按钮是一个更好的选择。
回答by fausto
I use this simple code:
我使用这个简单的代码：
//reset form
$("#mybutton").click(function(){
$("#myform").find('input:text, input:password, input:file, select, textarea').val('');
$("#myform").find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
});
回答by aldrien.h
By using jquery function .closest(element)and .find(...).
通过使用 jquery 函数.closest(element)和.find(...)。
Getting the parentelement and looking for the child.
获取父元素并寻找子元素。
Finally, do the function needed.
最后，做需要的功能。
$("#form").closest('form').find("input[type=text], textarea").val("");
回答by Ali Jamal
First line will reset form inputs
第一行将重置表单输入
$('form#myform').trigger("reset"); //Line1
$('form#myform select').trigger("change"); //Line2
Second one will reset select2
第二个将重置 select2
Optional:You can user this if you have different types registered with different events
可选：如果您使用不同的事件注册了不同的类型，则可以使用它
$('form#myform select, form input[type=checkbox]').trigger("change"); //Line2
回答by Kiran Kanzar
A quick reset of the form fields is possible with this jQuery reset function.
使用此 jQuery 重置功能可以快速重置表单字段。
when you got success response then fire below code.
当您收到成功响应时，请在下面的代码中触发。
$(selector)[0].reset();
$(selector)[0].reset();
