首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何通过.reset()方法使用jQuery重置表单

如何通过.reset()方法使用jQuery重置表单
EN

Stack Overflow用户
提问于 2013-05-09 09:02:34
回答 12查看 971.8K关注 0票数 325

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

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

这可能是其中一个原因吗?

EN

回答 12

Stack Overflow用户

发布于 2014-07-01 16:14:02

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

$('#form_id').trigger("reset");
票数 557
EN

Stack Overflow用户

发布于 2013-05-09 09:51:10

http://jsfiddle.net/8zLLn/

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

把它放在JS小提琴里。达到了预期的效果。

所以,上面提到的问题在这里都不是问题。也许你有一个相互冲突的身份问题?点击是否实际正在执行?

编辑:(因为我是一个没有适当注释能力的可悲的人)这不是你代码的直接问题。当您将其从当前使用的页面上下文中去掉时,它工作得很好,因此,它不是特定的jQuery/javascript &属性表单数据,而是必须是其他的数据。我会开始将它周围的代码一分为二,并尝试找出它发生在哪里。我是说,为了“确定”,我想你可以...

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

在点击功能中,并确保它的目标是正确的表单...

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

编辑第2部分:您可以尝试的一件事(如果它没有正确地针对它)是使用"input:reset"而不是您正在使用的东西……另外,我会建议,因为目标并不是错误地找出实际点击的目标。只需打开firebug/开发人员工具,你有什么,扔进去

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

看看会弹出什么。然后我们就可以从那里开始了。

票数 294
EN

Stack Overflow用户

发布于 2014-02-03 02:57:53

根据这篇文章here的说法,jQuery没有reset()方法;但是原生JavaScript有。因此,使用以下任一方法将jQuery元素转换为JavaScript对象:

$("#formId")[0].reset()
// or
$("#formId").get(0).reset()
票数 112
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/16452699

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档