如何使用.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> 

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

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的是什么 然后我们可以从那里去。

你可以尝试使用trigger() 引用链接

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

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

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

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

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

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

重置button根本不需要任何脚本(或名称或ID):

 <input type="reset"> 

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

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

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

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

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

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

通过使用jquery函数.closest(元素).find(…)

获取元素并寻找孩子

最后,做所需要的function。

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

我使用这个简单的代码:

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

你可以像这样添加一个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> 
 <button type="reset">Reset</reset> 

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

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

  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(); }); }