如何使用带有 .reset() 方法的 jQuery 重置表单

IT技术 javascript jquery forms reset
2021-01-18 19:46:29

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

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

这可能是原因之一吗？

6个回答

您可以尝试使用 trigger() 参考链接

$('#form_id').trigger("reset");
我正在使用 $('.profile_img_form').trigger('reset'); 我在我的表单上添加了 profile_img_form 命名类然后调用它。它不会重置我的表单并返回错误消息，例如 Uncaught SyntaxError: Invalid regular expression: /(^|\.)bs\.(?:.*\.|)fileinput(\.|$)/: 请建议是什么问题。谢谢。
2021-03-26 19:46:29
谢谢你的回答。节省了数小时的谷歌搜索/SO'ing :)
2021-03-27 19:46:29
@Kamlesh 它应该可以工作，我已经为你创建了一个演示，点击jsfiddle.net/Lkt4eq9y/2
2021-04-02 19:46:29
亲爱的投反对票的人，能否请您告诉我投反对票的原因，以便我改进答案。
2021-04-04 19:46:29
简直神奇而直接！非常感谢分享。
2021-04-07 19:46:29

http://jsfiddle.net/8zLLn/

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

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

因此，上述问题都没有错。也许您遇到了 ID 冲突问题？点击是否实际执行？

编辑：（因为我是一个没有适当评论能力的悲伤麻袋）这不是你的代码直接的问题。当您将其从当前使用的页面上下文中取出时，它工作正常，因此，它不是具有特定 jQuery/javascript 和属性表单数据的内容，而是其他内容。我会开始将它周围的代码一分为二，并尝试找出它发生的地方。我的意思是，只是为了“确保”，我想你可以……

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

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

如果是，它必须是此处未列出的内容。

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

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

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

@DylanChensky jQuery 的神奇之处在于一切都是一个集合（数组）。就像您在 jQuery 中使用常规数组一样[0]选择第一个元素。但在 jQuery 中，它选择元素的实际 html。因此，[0]正在为您提供 html，它允许您调用 html，而不是 jQuery，方法称为reset. 有关更多信息，请参阅下面的@kevin 的回答。
2021-03-12 19:46:29
我有一个问题。每次我使用console.log 时，我都不知道去哪里寻找它。我正在使用 Python IDLE 和一个终端来运行 Python 脚本。javascript 就在其中。无论如何，当我使用 `alert($('#configform')[0]) 时，它给了我 [object HTMLFormElement]
2021-03-14 19:46:29
尝试使用 alert(JSON.stringify($'#configform')[0]))。Alert 不太关心漂亮的打印对象（或告诉你里面有什么）。它只是让你知道它是一个对象。
2021-03-30 19:46:29
嗯似乎点击不起作用！我添加$('#ptest').html("clicked reset")了 click(function(){}); 它应该显示“点击重置”但它没有出现
2021-04-01 19:46:29
没有冲突的 ID :( 我正在尝试逐层选择并检查点击是否有效
2021-04-03 19:46:29

根据这里的这篇文章，jQuery 没有reset()方法；但是原生 JavaScript 可以。因此，使用以下任一方法将 jQuery 元素转换为 JavaScript 对象：

$("#formId")[0].reset()
// or
$("#formId").get(0).reset()
我想添加关于占位符的评论，表单的初始呈现，表单元素具有占位符的值，在此重置后不管占位符再次显示但值变为空白，因此在表单验证时要小心。我正在添加通用表单验证来检查占位符值是否为默认值。
2021-03-13 19:46:29
它有效，我同意，jQuery 没有 reset() 方法。您可以在 w3school 文档中了解如何使用原生 JavaScript 进行操作： w3schools.com/jsref/met_form_reset.asp
2021-03-29 19:46:29
我要注意的是，这只会重置表单，而不是清除它。即，如果表单具有随请求发送的值，则这些值将被恢复。
2021-04-02 19:46:29

这是在 vanilla Javascript 中比在 jQuery 中更容易完成的事情之一。jQuery 没有reset方法，但 HTML 表单元素有，因此您可以像这样重置表单中的所有字段：

document.getElementById('configform').reset();

如果您通过 jQuery 执行此操作（如此处的其他答案中所见：）$('#configform')[0].reset()，[0]则获取的表单 DOM 元素与您直接通过document.getElementById. 不过，后一种方法更有效也更简单（因为使用 jQuery 方法，您首先获得一个集合，然后必须从中获取一个元素，而使用 vanilla Javascript，您只需直接获取该元素）。

重置按钮根本不需要任何脚本（或名称或 ID）：

<input type="reset">

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

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

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

需要注意的是，“重置”并不意味着“我的表格已清除”。“重置”的语义实际上是将所有“表单”元素返回到它们原来的“值”属性。这至少让我困惑了几分钟！
2021-03-11 19:46:29
定义“不工作”。你得到什么错误？什么不起作用？重置按钮一直是 HTML 表单的一部分，它们可以工作。
2021-03-21 19:46:29
“不工作” - 它不会重置任何东西，表格中没有看到任何变化。
2021-03-25 19:46:29
@Lazerbeak12345——不幸的是，现在几乎所有的网页都是几乎覆盖 HTML DOM 的所有默认功能的应用程序。因此，即使是非常简单的页面现在也有数兆字节的脚本和库，而它们曾经是带有小脚本的 20 或 30k 的 HTML。不仅浪费了处理能力和带宽，而且可访问性和可用性通常很差。:-(
2021-03-30 19:46:29
你的意思只是那条线可以吗？oO 那么我上面的 html 是否正确？
2021-04-04 19:46:29
其它你可能感兴趣的问题
上一篇为 promise 编写循环的正确方法。 下一篇我可以将 required 属性应用到 HTML5 中的 <select> 字段吗？