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

Question

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

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

这是我的一些代码：

(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. 错误。

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

Answer 1

查看您的 fiddle 您有几个问题：

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

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

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

Using jQuery to clear certain fields in a WTForm

html

javascript

jquery

flask

wtforms