使用 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();
            }
        });
    }

})

但是，我通常认为表单重置按钮是不必要的，而且实际上不利于用户体验。对于大多数（我会说 99.9%）的用例，当用户开始输入表单时，他们并不打算完全删除他们的数据，因此在错误点击时重置按钮（特别是如果操作没有通过 UI 设计明确），将消除用户的输入，让他们感到沮丧（并且没有“撤消”追索权）。