使用 jQuery 清除 WTForm 中的某些字段答案

【问题标题】：Using jQuery to clear certain fields in a WTForm使用 jQuery 清除 WTForm 中的某些字段
【发布时间】：2017-05-08 15:03:31
【问题描述】：

在 Flask 应用程序中，我有一个包含多个字段的表单。有两个提交按钮，其中一个用于仅提交来自字段一和字段二的信息（即使其他字段包含文本）。

我很不情愿地决定尝试在 jQuery 中做这件事，我没有太多经验。在考虑使用 $.post 方法后，我决定使用 $.reset。

这是我的一些代码：

(home.html)

<HEAD>
  <script src="/static/scripts/jquery-3.2.1.js">
  </script>
  <script src="/static/scripts/reset.js">
  </script>
<TITLE>My UI</TITLE>
</HEAD>

（继承自 home.html 的单独 html 文件）

<form action="/" method="post">
  <dl>
        foo
        {{ form.foo }}
      bar
      {{ form.bar }}

      <form action="/" method="post"><p><input type=submit class="reset" value="Get Information">
        Status
        {{ form.status(class_="reset-this") }}
        other
          {{ form.other(class_="reset-this") }}
        Frequency
          {{ form.frequency(class_="reset-this") }}

  </dl>
  <p><input type=submit value=Update>

最后，我的 JS：

$(function() {
    $("button.reset").click(function() {
      $(".resetThis").val("");
    });
  });

它没有任何效果，当我运行文件时，当我尝试在 JSFiddle 中模拟它时，我收到 Forbidden (403): CSRF verification failed. Request aborted. 错误。

我缺少一些基本的东西吗？

【问题讨论】：

我们可以看看小提琴吗？
当然！类似这样的东西：jsfiddle.net/joshf/g21knp5v（表单在此处无法正确呈现，因为它在 jinja2 中，但“验证失败”错误会重复。）

标签： javascript jquery html flask wtforms

【解决方案1】：

看看你的小提琴，你有几个问题：

你缺少一些严肃的格式，你没有关闭 html 标签。
您在另一个表单中有一个表单，为什么？
您正在使用输入 type="submit"，如果您想重置您必须使用 type="button" 的输入，否则表单将尝试提交您在 <form action="/"> 上输入的任何内容，因此会出现 403 错误
您正在使用 <form action="/">，它只会在您的情况下产生混淆。
在 jquery 函数中您使用的是 $("button.reset")，但在 html 中您使用的是 inputs 而从不使用 buttons。
在您的 jquery 函数中，您尝试使用 resetThis 类，但在您的 html 中，该类是 reset-this
你没有将 jquery 附加到你的小提琴，没有它它永远不会工作。

最后我重构了your code here 并修复了所有这些问题，供您从那里开始构建。但是，当您尝试实施您不熟悉的技术时，请多做一些研究。

【讨论】：

非常感谢您的反馈。我从一个更大的项目中复制了一些东西，我认为这就是一些问题的来源。无论如何，这非常有用！