使用 Jquery 重置表单

Question

我正在尝试在使用 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

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

Answer 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 设计明确），将删除用户的输入，这让他们很沮丧（并且没有 "undo" 追索权）。

Answer 2

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 禁用。

Answer 3

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

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

或者只是 JS

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

使用 Jquery 重置表单

Reset a form with Jquery

jquery

forms

reset