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

Posted 2023-02-22

技术标签:

【中文标题】如何使用带有 .reset() 方法的 jQuery 重置表单【英文标题】：How to reset a form using jQuery with .reset() method 【发布时间】：2013-05-03 09:26:13 【问题描述】：

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

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

这可能是原因之一吗？

【问题讨论】：

你能举一个不工作的例子吗？是否有任何字段被重置？有点像这样，但在这里工作正常jsfiddle.net/chJ8B :( 可能是因为脚本的其他部分？但我只有一个表格我的问题是是否没有任何字段被重置/有些正在工作 您的 html 无效。表单不能是 TBODY 元素的子元素，TR 也不能是 FORM 元素的子元素。将表格标签放在表格之外（即将表格放在表格中）。很可能表单被移到表格外，但表单控件留在单元格中，因此它们不再在表单中。 @RobG：好点！我会试试的。谢谢！如果我不回到这里获取我的小提琴链接，我可能会错过这个有用的评论：s 【参考方案1】：

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

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

【讨论】：

简直神奇而直接！非常感谢分享。亲爱的投票者，请告诉我你投票失败的原因，以便我改进我的答案。我正在使用 $('.profile_img_form').trigger('reset');我在我的表单上添加了 profile_img_form 命名类，然后调用它。它不会重置我的表单并返回错误消息，例如 Uncaught SyntaxError: Invalid regular expression: /(^|\.)bs\.(?:.*\.|)fileinput(\.|$)/: 请建议什么是问题。谢谢。 @Kamlesh 应该可以了，我已经为你创建了一个演示，点击jsfiddle.net/Lkt4eq9y/2 感谢您的回答。节省了几个小时的谷歌搜索 / SO'ing :)【参考方案2】：

http://jsfiddle.net/8zLLn/

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

把它放在 JS fiddle 中。按预期工作。

因此，上述问题都不是问题所在。也许你有一个冲突的 ID 问题？点击是否真正执行？

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

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

在点击函数中并确保它定位正确的表单...

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

编辑第 2 部分：您可以尝试的一件事（如果它没有正确定位它）是使用 "input:reset" 而不是您正在使用的...另外，我建议，因为它不是错误地寻找的目标找出实际点击的目标。直接打开firebug/开发者工具，你有什么，扔

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

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

【讨论】：

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

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

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

【讨论】：

它有效，我同意，jQuery 没有 reset() 方法。您可以在 w3school 文档中查看如何使用原生 JavaScript 进行操作：w3schools.com/jsref/met_form_reset.asp 我想指出，这只会重置表单，不会清除它。即，如果表单具有随请求发送的值，则这些值将被恢复。我想添加关于占位符的评论，表单的初始渲染，表单元素具有占位符的值，重置后不管占位符再次显示但值变为空白，所以在表单验证时要小心。我正在添加通用表单验证来检查占位符值是否为默认值。【参考方案4】：

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

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

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

【讨论】：

【参考方案5】：

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

<input type="reset">

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

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

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

【讨论】：

你的意思只是那一行就行了？ o.O 那么我上面的 html 是否正确？定义“不工作”。你得到什么错误？什么不工作？重置按钮一直是 HTML 表单的一部分，它们可以工作。 “不工作” - 它没有重置任何东西，表单中没有看到任何变化。需要注意的是，“重置”并不意味着“我的表单被清除”。 “重置”的语义实际上所做的是将所有“表单”元素返回到它们原来的“值”属性。这至少让我困惑了几分钟！ @Lazerbeak12345——不幸的是，现在几乎所有的网页都是几乎覆盖 HTML DOM 的所有默认功能的虚拟应用程序。因此，即使是非常简单的页面现在也是数兆字节的脚本和库，而它们曾经是 20 或 30k 的 HTML 和一个小脚本。不仅处理能力和带宽被浪费，而且可访问性和可用性通常都很差。 :-(【参考方案6】：

第一行将重置表单输入

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

第二个将重置 select2

可选：如果你有不同的类型注册了不同的事件，你可以使用它

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

【讨论】：

【参考方案7】：

我终于解决了这个问题！！ @RobG 关于form 标签和table 标签是正确的。 form 标签应该放在表格之外。这样，

<td><input type="reset" id="configreset" value="Reset"></td>

无需 jquery 或其他任何东西即可工作。只需点击按钮，tadaa~ 整个表单就被重置了；）太棒了！

【讨论】：

您通常可以通过检查源代码来确认发生这种情况（不要查看页面源代码，因为这会显示生成的内容，而是使用开发人员工具 F12 之类的东西)，它向您显示“浏览器看到的内容”——在这种情况下，show you（至少在 Chrome 中）form 标记已在tbody 的开头自动关闭，不包括输入元素。检查兼容性：developer.mozilla.org/en-US/docs/Web/HTML/Element/input/reset【参考方案8】：

jQuery 没有reset() 方法；但原生 JavaScript 可以。因此，使用以下任一方法将 jQuery 元素转换为 JavaScript 对象：

$("#formId")[0].reset();

$("#formId").get(0).reset();

我们可以简单地使用 Javascript 代码

document.getElementById("formid").reset();

【讨论】：

【参考方案9】：

我使用这个简单的代码：

//reset form 
$("#mybutton").click(function()
    $("#myform").find('input:text, input:password, input:file, select, textarea').val('');
    $("#myform").find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
);

【讨论】：

Same comment as on aldrien's answer【参考方案10】：

通过使用jquery函数.closest(element)和.find(...)。

获取 parent 元素并寻找 child。

最后，做需要的功能。

$("#form").closest('form').find("input[type=text], textarea").val("");

【讨论】：

虽然这个代码块可能会回答这个问题，但您总是应该提供一些解释为什么它会这样做。 $("#form").find("input[type=text], textarea").val(""); 我是这样做的【参考方案11】：

使用这个 jQuery 重置功能可以快速重置表单字段。

当你得到成功响应时，然后触发下面的代码。

$(selector)[0].reset();

【讨论】：

【参考方案12】：

您可以像这样添加一个输入类型 = 重置和一个 id = 重置表单

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

【讨论】：

别忘了隐藏它……让它成为一种更现代的形式。 【参考方案13】：

这是使用 Jquery 的简单解决方案。它在全球范围内有效。看看代码。

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

在您需要重置它的每个表单中为按钮添加一个清晰的类。例如：

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

【讨论】：

【参考方案14】：

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

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

【讨论】：

【参考方案15】：

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

【讨论】：

我能想到的唯一另一个问题是您有另一个具有相同 ID (configform) 的表单。您应该使用控制台进行一些调查。首先尝试$。如果您使用的是 Chrome，如果加载了 jQuery，在控制台中键入 $ 将激活一个上下文相关列表。如果您键入$ 并按回车，如果加载了 jQuery，它将评估为一个函数。下次试试$("#configform")。右键单击结果并选择Reveal in Elements panel。谢谢 :) 但我没有 chrome。使用萤火虫的方法是否相同？（我已经安装了，但以前从未使用过）【参考方案16】：

您可以使用以下内容。

@using (Html.BeginForm("MyAction", "MyController", new  area = "MyArea" , FormMethod.Post, new  @class = "" ))

<div class="col-md-6">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
        @Html.LabelFor(m => m.MyData, new  @class = "col-form-label" )
    </div>
    <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
        @Html.TextBoxFor(m => m.MyData, new  @class = "form-control" )
    </div>
</div>
<div class="col-md-6">
    <div class="">
        <button class="btn btn-primary" type="submit">Send</button>
        <button class="btn btn-danger" type="reset"> Clear</button>
    </div>
</div>

然后清除表格：

    $('.btn:reset').click(function (ev) 
        ev.preventDefault();
        $(this).closest('form').find("input").each(function(i, v) 
            $(this).val("");
        );
    );

【讨论】：

这里似乎有很多特定于框架的代码。我建议在回答关于 SO 的问题时避免此类事情，因为问题没有指定他们使用除 jQuery 之外的任何框架

以上是关于如何使用带有 .reset() 方法的 jQuery 重置表单的主要内容，如果未能解决你的问题，请参考以下文章

使用 jQuery 重置多阶段表单

JQuer.HoverDir的基本使用方法

如何解决“jQuery 需要一个带有文档的窗口”错误？

在vue中如何引jquer

Turtle Mock：如何忽略意外来电？