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

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

javascript jquery html flask

Javascript 使用jQuery清除WTForm中的某些字段,javascript,jquery,html,flask,wtforms,Javascript,Jquery,Html,Flask,Wtforms,在Flask应用程序中，我有一个带有多个字段的表单。有两个提交按钮，其中一个按钮仅用于提交来自字段1和字段2的信息，即使其他字段包含文本我不情愿地决定尝试在jQuery中这样做，这方面我没有太多经验。在考虑使用$.post方法后，我决定使用$.reset 以下是我的一些代码： home.html <HEAD> <script src="/static/scripts/jquery-3.2.1.js"> </script> <script s

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

我不情愿地决定尝试在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>

它没有任何效果，当我运行文件时，当我尝试在JSFIDLE中模拟它时，我得到一个禁止的403:CSRF验证失败。请求被中止。错误

有什么基本的东西我不知道吗？

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

您缺少一些严格的格式，无法关闭html标记。你在另一个表单中有一个表单，为什么？如果要重置输入，则使用input type=submit，必须使用type=button，否则表单将尝试提交到您放置的任何内容，因此出现403错误您使用的是在您的案例中只会产生混乱的方法。在jquery函数中使用$button.reset，但在html中使用的是输入和从不按钮。在jquery函数中，您试图使用resetThis类，但在html中，该类是resetThis 您没有将jquery附加到您的小提琴上，没有jquery，它永远不会工作。

最后，我对所有这些问题进行了重构，修复后，您可以从那里开始构建。但是，当您尝试实施一项您不熟悉的技术时，请进行更多的研究。

我们可以看看小提琴吗？当然可以！类似这样的情况：表单在这里不能正确呈现，因为它在jinja2中，但是验证失败的错误会复制。非常感谢您的反馈。我从一个更大的项目中复制了一些东西，我想这就是一些问题的来源。无论如何，这是非常有用的！

<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>

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