如何使用带有 .reset() 方法的 jQuery 重置表单 [英] How to reset a form using jQuery with .reset() method

问题描述

我有可以在我单击重置按钮时重置表单的工作代码.然而，当我的代码变长后，我意识到它不再起作用了.

<table class="config"><头><tr><th colspan="4";样式=填充底部:20px；颜色:#6666FF；文本对齐:左；font-size: 1.5em">Control Buttons Configuration</th></tr><tr><th>索引</th><th>开关</th>响应号<第>描述</tr></thead><form id="configform";名称=输入"动作=#"方法=获取"><tr><td style="text-align: center">1</td><td><img src=static/switch.png";高度=100像素"；width=108px"></td><td id="small"><input style="background: white;颜色:黑色；"类型=文本"值="id=number_one"></td><td><input style="background: white;颜色:黑色；"类型=文本"id=label_one"></td></tr><tr><td style="text-align: center">2</td><td><img src=static/switch.png";高度=100像素"；width=108px"></td><td id="small"><input style="background: white;颜色:黑色；"类型=文本"id = "number_two";值="></td><td><input style="background: white;颜色:黑色；"类型=文本"id =label_two"></td></tr><tr><td style="text-align: center">3</td><td><img src=static/switch.png";高度=100像素"；width=108px"></td><td id="small"><input style="background: white;颜色:黑色；"类型=文本"id=number_three"值="></td><td><input style="background: white;颜色:黑色；"类型=文本"id=label_three"></td></tr><tr><td style="text-align: center">4</td><td><img src=static/switch.png";高度=100像素"；width=108px"></td><td id="small"><input style="background: white;颜色:黑色；"类型=文本"id=number_four"值="></td><td><input style="background: white;颜色:黑色；"类型=文本"id=label_three"></td></tr><tr><td></td><td><输入类型=提交"id =配置提交"value=提交"></td></tr><tr><td><输入类型=重置"id="configreset"value=重置"></td></tr></表单></tbody>

还有我的 jQuery:

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

为了使 .reset() 方法能够工作，是否应该在我的代码中包含一些源代码?以前我使用的是:

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

这可能是原因之一吗?

解决方案

我终于解决了问题！！@RobG 关于 form 标签和 table 标签是正确的.form 标签应该放在表格之外. 这样，

无需 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屋！