如何用.reset（）方法使用jQuery重置表单 [英] How to reset a form using jQuery with .reset() method
本文介绍了如何用.reset（）方法使用jQuery重置表单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我点击重置按钮时，我的工作代码可能会重置我的表单。然而，当我的代码变得越来越长时，我意识到它不再工作。
< div id =labels>
< table class =config>
< thead>
< tr>
< tr>
< th>索引< / th>
< th> Switch< / th>
< th>响应编号< / th>
< th>说明< / th>
< / tr>
< / thead>
< tbody>
< tr>< td style =text-align：center> 1< / td>
< td>< img src =static / switch.pngheight =100pxwidth =108px>< / td>
< td id =small>< input style =background：white; color：black; type =textvalue =id =number_one>< / td>
< td>< input style =background：white; color：black; type =textid =label_one>< / td>
< / tr>
< tr>
< td style =text-align：center> 2< / td>
< td>< img src =static / switch.pngheight =100pxwidth =108px>< / td>
< td id =small>< input style =background：white; color：black; type =textid =number_twovalue =>< / td>
< td>< input style =background：white; color：black; type =textid =label_two>< / td>
< / tr>
< tr>
< td style =text-align：center> 3< / td>
< td>< img src =static / switch.pngheight =100pxwidth =108px>< / td>
< td id =small>< input style =background：white; color：black; type =textid =number_threevalue =>< / td>
< td>< input style =background：white; color：black; type =textid =label_three>< / td>
< / tr>
< tr>
< td style =text-align：center> 4< / td>
< td>< img src =static / switch.pngheight =100pxwidth =108px>< / td>
< td id =small>< input style =background：white; color：black; type =textid =number_fourvalue =>< / td>
< td>< input style =background：white; color：black; type =textid =label_three>< / td>
< / tr>
< tr>
< td>< / td>
< td>< input type =submitid =configsubmitvalue =Submit>< / td>
< / tr>
< tr>
< td>< input type =resetid =configresetvalue =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 =静态/ jquery的-1.9.1.min.js>< /脚本>
< script src =static / jquery-migrate-1.1.1.min.js>< / script>
< script src =static / jquery.mobile-1.3.1.min.js>< / script>
这可能是其中一个原因吗？
解决方案
我终于解决了问题！
@RobG对于表格标记和表格标记是正确的。 表格标签应置于表格外。
< td>< input type =resetid =configresetvalue =Reset>< / td>
不需要jquery或其他任何东西。简单的点击按钮和tadaa〜整个表格重置;）精彩！
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:
$('#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:
<script src="static/jquery.min.js">
</script>
<script src="static/jquery.mobile-1.2.0.min.js">
</script>
and the .reset() method was working.
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?
解决方案
I've finally solve the problem!!
@RobG was right about the form tag and table tag. the form tag should be placed outside the table. with that,
<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!
这篇关于如何用.reset（）方法使用jQuery重置表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
