如何使用.reset（）方法使用jQuery重置表单

我有工作代码，可以重置我的表单，当我点击一个重置button。 但是，当我的代码变得越来越长，我意识到它不再工作了。

<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> 

和我的jQuery：

  $('#configreset').click(function(){ $('#configform')[0].reset(); }); 

是否有一些源代码应该包含在我的代码中，以使.reset()方法正常工作？ 以前我使用的是：

 <script src="static/jquery.min.js"> </script> <script src="static/jquery.mobile-1.2.0.min.js"> </script> 

和.reset()方法正在工作。

目前我正在使用

 <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> 

这可能是其中一个原因吗？

Answer 1

http://jsfiddle.net/8zLLn/

  $('#configreset').click(function(){ $('#configform')[0].reset(); }); 

把它放在JS小提琴。 按预期工作。

所以，上述问题在这里都没有错。 也许你有一个冲突的身份证问题？ 点击实际执行？

编辑:(因为我是一个没有适当的评论能力的悲伤麻袋）这不是直接与您的代码问题。 当你从当前正在使用的页面的上下文中取出它的时候，它可以正常工作，所以它不是特定的jQuery / javascript＆归档表单数据，它必须是其他的东西。 我将开始将代码分成两部分，并尝试找出发生的地方。 我的意思是，只要“确定”，我想你可以…

 console.log($('#configform')[0]); 

在点击function，并确保它的目标是正确的forms…

如果是这样的话，它必须是这里没有列出的东西。

编辑第2部分：你可以尝试的一件事（如果它没有正确定位）是使用“input：复位”，而不是你正在使用的…另外，我build议，因为它不是目标是不正确的工作，找出实际点击的目标是什么 只要打开萤火虫/开发者工具，你有什么东西，扔进去

 console.log($('#configreset')) 

看看popup的是什么 然后我们可以从那里去。

Answer 2

你可以尝试使用trigger（） 引用链接

 $('#form_id').trigger("reset"); 

Answer 3

根据这里的post，jQuery没有reset()方法; 但本地JavaScript的。 所以，通过使用以下代码将jQuery元素转换为JavaScript对象：

 $("#formId")[0].reset() // or $("#formId").get(0).reset() 

Answer 4

这是其中的一个事实，在香草JavaScript中比jQuery更简单。 jQuery没有reset方法，但HTML表单元素，所以你可以重置像这样的forms的所有领域：

 document.getElementById('configform').reset(); 

如果你通过jQuery（如其他答案在这里看到： $('#configform')[0].reset() ）， [0]获取相同的表单DOM元素，你会直接通过document.getElementById 。 后一种方法既更高效，更简单（因为使用jQuery方法，你首先得到一个集合，然后必须从中获取一个元素，而使用vanilla Javascript则直接获取元素）。

Answer 5

重置button根本不需要任何脚本（或名称或ID）：

 <input type="reset"> 

你完成了。 但是，如果你真的必须使用脚本，请注意，每个表单控件都有一个表单引用它所在的表单的属性，所以你可以这样做：

 <input type="button" onclick="this.form.reset();"> 

但重置button是一个更好的select。

Answer 6

我终于解决了这个问题！ @RobG是正确的form标签和table标签。 form标签应放在表格外面。 接着就，随即，

 <td><input type="reset" id="configreset" value="Reset"></td> 

工作不需要jQuery或其他任何东西。 简单的点击button和tadaa〜整个表格重置）辉煌！

Answer 7

通过使用jquery函数.closest（元素）和.find（…） 。

获取父元素并寻找孩子 。

最后，做所需要的function。

 $("#form").closest('form').find("input[type=text], textarea").val(""); 

Answer 8

我使用这个简单的代码：

 //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'); }); 

Answer 9

你可以像这样添加一个id = resetform的input type = reset

 <html> <form> <input type = 'reset' id = 'resetform' value = 'reset'/> <!--Other items in the form can be placed here--> </form> </html> 

然后用jQuery你只需使用ID = resetform元素的.click（）函数如下

 <script> $('#resetform').click(); </script> 

和窗体重置注意：你也可以使用你的css隐藏id = resetform的重置button

 <style> #resetform { display:none; } </style> 

Answer 10

 <button type="reset">Reset</reset> 

最简单的方法，我可以认为这是健壮的。 放在表单标签内。

Answer 11

你的代码应该工作。 确保存在static/jquery-1.9.1.min.js 。 此外，你可以尝试恢复到static/jquery.min.js 。 如果解决了这个问题，那么你已经指出了这个问题。

Answer 12

  reset(){ this.companyForm["enable"] = true; jQuery('has-success').each(function () { jQuery(this).removeClass('has-success'); }); jQuery('.has-error').each(function () { jQuery(this).removeClass('has-error'); }); jQuery('.has-feedback').each(function () { jQuery(this).removeClass('has-feedback'); }); jQuery('.help-block').each(function () { jQuery(this).hide(); }); jQuery('.form-control-feedback').each(function () { jQuery(this).hide(); }); }