使用 Jquery 重置表单答案

【问题标题】：Reset a form with Jquery使用 Jquery 重置表单
【发布时间】：2016-05-15 19:51:04
【问题描述】：

我正在使用 Java 和 Tapestry 开发的 Web 应用程序中尝试使用 Jquery 重置表单。问题是 Tapestry 没有提供任何重置表单的方法，所以我需要为它创建一个 JS 模块。

我的应用程序中有大约 4-5 个具有不同 ID 的表单，所以我尝试了这个：

define(["jquery"], function($) {

    return function() {
        $("form").on("submit", function() {
            if (!$("form-group").hasClass("has-errors") && !$("div").hasClass("alert")){
                $("form").reset();
            }
        });
    }

})

这是我第一次使用 JQuery，所以它不起作用。我想要做的是在表单的提交按钮被点击时设置一个回调。这是我在表单中的按钮声明：

<div class="col-md-offset-5 col-md-3"><button class="btn btn-block btn-primary" type="submit"><span class="glyphicon glyphicon-plus"></span> Add

我在每一页上只有一个表格。我认为这很简单，但我无法让它工作。任何人都可以给我一些帮助吗？谢谢。

【问题讨论】：

你也可以用这种方式清除表单 -- $('form').find("input[type=text], textarea").val(""); -- 提供您添加以逗号分隔的输入类型。 jsfiddle.net/pxqhb5k6

标签： jquery forms reset

【解决方案1】：

.reset() 方法不是 jQuery 方法，这就是它不能与 jQuery 对象一起使用的原因。但是，您可以在 jQuery 对象中引用 DOM 节点，然后在其上使用本机 JS 方法，即：$("form")[0].reset();。

define(["jquery"], function($) {

    return function() {
        $("form").on("submit", function() {
            if (!$("form-group").hasClass("has-errors") && !$("div").hasClass("alert")){
                $("form")[0].reset();
            }
        });
    }

})

但是，我通常认为没有必要使用表单重置按钮，事实上，detrimental to user experience。对于大多数（我会说 99.9%）的用例，当用户开始输入表单时，他们无意完全删除他们的数据，因此当错误单击重置按钮时（尤其是如果操作没有通过 UI 设计明确表示），会抹去用户的输入，让他们感到沮丧（并且没有“撤消”资源）。

【讨论】：

谢谢！现在它工作正常。我不知道 .reset() 不是 jQuery 方法。是的，我知道重置按钮对用户不是很友好，但我正在制作一个带有 AJAX 成功消息的表单，所以如果与数据库的事务成功，页面会重置表单并显示 AJAX Bootstrap 成功-警报，因此您可以关闭警报或返回上一页，或者您可以再次填写表格（在这种情况下，将体育赛事添加到数据库中）。感谢您提供 ux 信息的链接！
@EliasGarciaMariño 我的错，仔细检查后，您并没有实现关闭按钮功能，而是一个重置表单的回调 :) 这应该会让 UI/UX 大师呵呵。

【解决方案2】：

最新版本 jQuery (2021) 的更新答案。

$("#myForm").trigger("reset");

或者仅仅是 JS

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

【讨论】：

【解决方案3】：

reset 功能（仍然）在jQuery 中不存在。但是有几种方法可以实现表单重置。例如，下面的代码循环遍历表单的每个元素并调用 DOM reset JavaScript 方法。

jQuery('#form').each(function(){
  this.reset();
});

更简单的方法是执行以下操作：

  jQuery("#form").reset();

在这种情况下，您应该像这样实现自己的 reset 方法：

jQuery.fn.reset = function () {
  jQuery(this).each(function() { 
    this.reset(); 
  });
}

实现自己的reset表单方法的另一种方法是：

 jQuery.fn.reset = function(fn) {
   return fn ? this.bind("reset", fn) : this.trigger("reset");
 };

这将允许您将代码附加到 reset 函数：

 jQuery("#form").reset(function(){ 
   /* some other code */ 
 });

您可以（并且仍然推荐这样做）使用reset 类型的简单 HTML 输入 - 即使在禁用 JavaScript 的浏览器上也可以这样做。

【讨论】：