如何使用 jQuery 和 .reset() 方法重置表单

2022-08-29 23:45:25

我有工作代码,当我点击重置按钮时,可以重置我的表单。但是,在我的代码变长之后,我意识到它不再起作用了。

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

这可能是原因之一吗?


答案 1

你可以尝试使用触发器()参考链接

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

答案 2

http://jsfiddle.net/8zLLn/

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

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

因此,上述问题都不是问题所在。也许您遇到了 ID 冲突问题?点击是否实际执行?

编辑:(因为我是一个没有适当注释能力的悲伤麻袋)这不是你的代码直接的问题。当你把它从你当前使用的页面的上下文中取出时,它工作正常,所以,它不是带有特定jQuery / javascript和属性表单数据的东西,它必须是其他东西。我会开始将周围的代码一分为二,并试图找到它在哪里发生。我的意思是,只是为了“确保”,我想你可以...

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

在点击功能中,并确保它定位到正确的表单...

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

编辑第2部分:你可以尝试的一件事(如果它没有正确定位它)是使用“输入:重置”而不是你正在使用的东西......另外,我建议,因为它不是目标错误地工作,以找出实际点击的定位。只需打开firebug/开发人员工具,你有什么,扔进去

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

并查看弹出的内容。然后我们可以从那里开始。