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

-1

在Flask应用程序中，我有一个包含多个字段的表单。有两个提交按钮，其中一个旨在仅提交字段1和2的信息（即使其他字段包含文本）。使用jQuery清除WTForm中的某些字段

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

（单独的HTML文件从home.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(""); 
    }); 
    });

I t没有任何影响，当我运行该文件，并且当我尝试在JSFiddle中模拟它时，我得到一个Forbidden (403): CSRF verification failed. Request aborted.错误。

有什么基本我失踪了？

来源

2017-05-08 Josh Friedlander

我们可以看到小提琴吗？ – randomguy04

当然！类似这样的：https://jsfiddle.net/joshf/g21knp5v/（表单在这里没有正确渲染，因为它在jinja2中，但“验证失败”错误重复。） –

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

你缺乏一些严重的格式，你不关闭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与所有这些问题修复你从那里建立起来。但是当你试图实施一种你不熟悉的技术时，请做更多的研究。

来源

2017-05-09 16:20:49 randomguy04

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

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

回答

相关问题