我有工作代码,可以重置我的表单时,我点击重置按钮。然而,当我的代码变长后,我意识到它不再工作了。

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

这可能是原因之一吗?


当前回答

重置按钮根本不需要任何脚本(或名称或id):

<input type="reset">

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

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

但重置按钮是更好的选择。

其他回答

重置按钮根本不需要任何脚本(或名称或id):

<input type="reset">

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

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

但重置按钮是更好的选择。

下面是Jquery的简单解决方案。它在全球都适用。看一下代码。

$('document').on("click", ".clear", function(){
   $(this).closest('form').trigger("reset");
})

在需要重置按钮的每个表单中添加一个clear类。例如:

<button class="button clear" type="reset">Clear</button>

您的代码应该可以工作。确保static/jquery-1.9.1.min.js存在。此外,您可以尝试恢复到静态/jquery.min.js。如果这解决了问题,那么你就找到了问题所在。

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

我能想到的最简单的方法就是强健。放置在表单标记内。

第一行将重置表单输入

$('form#myform').trigger("reset"); //Line1
$('form#myform select').trigger("change"); //Line2

第二个将重置select2

可选:如果使用不同的事件注册了不同的类型,则可以使用此选项

$('form#myform select, form input[type=checkbox]').trigger("change"); //Line2