用Flask Jinja2和WTForms隐藏一个表单组 [英] Hiding a form-group with Flask Jinja2 and WTForms
问题描述
我试图根据表单另一部分的复选框的状态显示或隐藏表单域。我认为我可以用jQuery .show（）或.hide（）来做到这一点，但是目前我没有太多的运气。有什么想法吗？
表单类：
$ $ p $ class MyForm（Form ）：
checked = BooleanField（'Check this box：'）
date = DateField（'Date：'，format ='％Y-％m-％d'，id =dates）
submit = SubmitField（'Submit'）
模板：
{％importbootstrap / wtf.htmlas wtf％}
{％block content％}
{{form.hidden_tag（）}}
{{wtf.form_field（form.checked）}}
{{wtf.form_field（form.date）}}
{ wtf.form_field（form.submit）}}
{％endblock％}
{％block scripts％}
jQuery（document）.ready（function（）{
$（＃checked）。change（function（）{
if（this.checked）{
$（ '; #dates'）。show（）;
} else {
$（'＃dates'）。hide（）;
}
}）;
} ）;
< / script>
{％endblock％}
<看起来你正在使用 Flask-Bootstrap 。
首先，确保在模板中包含 {％extends'bootstrap / base.html'％} >。如果没有这一行，你就会失去Flask-Bootstrap在模板中包含的所有东西，比如jQuery。第二，你重写脚本块。这是Flask-Bootstrap包含jQuery的地方。为了在不丢失基本版本的情况下放置自己的东西，您需要使用 Jinja的 super 功能。它将包括父模板的脚本块和您自己的。
完成这些更改后，您的模板应该看起来像像
{％extends'bootstrap / base.html'％}
{％importbootstrap / wtf.htmlas wtf％}
{％block content％}
< form>
{{form.hidden_tag（）}}
{{wtf.form_field（form.checked）}}
{{wtf.form_field（form.date）}}
{ {wtf.form_field（form.submit）}}
< / form>
{％endblock％}
{％block scripts％}
{{super（）}}
< script>
jQuery（document）.ready（function（）{
$（＃checked）。change（function（）{
if（this.checked）{
$（ '; #dates'）。show（）;
} else {
$（'＃dates'）。hide（）;
}
}）;
} ）;
< / script>
{％endblock％}
I'm trying to show or hide a form field based on the state of a checkbox in another part of the form. I thought that I could do this with jQuery .show() or .hide() with relative ease, but I'm not having much luck so far. Any thoughts?
The form class:
class MyForm(Form):
checked = BooleanField('Check this box:')
date = DateField('Date:', format='%Y-%m-%d', id="dates")
submit = SubmitField('Submit')
The template:
{% import "bootstrap/wtf.html" as wtf %}
{% block content %}
{{ form.hidden_tag() }}
{{ wtf.form_field(form.checked) }}
{{ wtf.form_field(form.date) }}
{{ wtf.form_field(form.submit) }}
{% endblock %}
{% block scripts %}
<script type="text/javascript">
jQuery(document).ready(function() {
$("#checked").change(function() {
if(this.checked) {
$('#dates').show();
} else {
$('#dates').hide();
}
});
});
</script>
{% endblock %}
It looks like you are using Flask-Bootstrap.
First, make sure you include {% extends 'bootstrap/base.html' %} in your template. Without that line, you'll lose out on everything Flask-Bootstrap includes in the template, such as jQuery.
Second, you are overriding the scripts block. This is where Flask-Bootstrap includes jQuery. In order to put your own stuff there without losing the base version, you need to use Jinja's super function. It will include the parent template's scripts block along with your own.
After making these changes your template should look something like
{% extends 'bootstrap/base.html' %}
{% import "bootstrap/wtf.html" as wtf %}
{% block content %}
<form>
{{ form.hidden_tag() }}
{{ wtf.form_field(form.checked) }}
{{ wtf.form_field(form.date) }}
{{ wtf.form_field(form.submit) }}
</form>
{% endblock %}
{% block scripts %}
{{ super() }}
<script>
jQuery(document).ready(function() {
$("#checked").change(function() {
if (this.checked) {
$('#dates').show();
} else {
$('#dates').hide();
}
});
});
</script>
{% endblock %}
这篇关于用Flask Jinja2和WTForms隐藏一个表单组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
