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设计明确表示），将用户的输入抹去沮丧（并且没有“撤销”追索权）。

Answer 2

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

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

或者只是JS

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

Answer 3

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的浏览器上也会如此。

使用Jquery重置表单

3 个答案: