如何使用jQuery用.reset()方法重置窗体

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

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

这可能是原因之一吗?

当前回答

根据这篇文章，jQuery没有reset()方法;但是原生JavaScript可以。因此，将jQuery元素转换为JavaScript对象可以使用:

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

2014-02-02 18:57:52

其他回答

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

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

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

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

2018-09-01 07:13:32

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

2013-05-09 01:54:04

你可以尝试使用trigger() Reference Link

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

2014-07-01 08:14:01

http://jsfiddle.net/8zLLn/

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

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

所以，上面提到的问题都不是问题。也许你的身份证有问题?点击是否实际执行?

编辑:(因为我是一个没有适当评论能力的悲伤的人)这不是你的代码直接的问题。它的工作很好，当你把它从你目前使用的页面的上下文中，所以，而不是它是一些与特定的jQuery/javascript &有属性的表单数据，它必须是其他的东西。我开始把它周围的代码分成两半，试着找出它在哪里运行。我的意思是，为了“确定”，我想你可以……

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

在点击功能，并确保它的目标是正确的形式…

如果是的话，一定是这里没有列出的东西。

你可以尝试的一件事(如果它没有正确地定位它)是使用“input:reset”而不是你正在使用的…此外，我建议，因为它不是目标，不正确的工作，以找出实际点击的目标是什么。只要打开firebug/开发者工具，随便扔进去

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

看看会出现什么。然后我们可以从这里开始。

2013-05-09 01:51:09

你可以像这样用id = resetform添加输入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隐藏重置按钮

<style>
#resetform
{
display:none;
}
</style>

2013-07-25 12:15:05

如何使用jQuery用.reset()方法重置窗体

推荐文章

最新文章

标签