使用 Flask Jinja2 和 WTForms 隐藏表单组

Question

我正在尝试根据表单另一部分中复选框的状态来显示或隐藏表单字段。我认为我可以使用 jQuery .show() 或 .hide() 相对轻松地做到这一点，但到目前为止我运气不佳。有什么想法吗？

表单类：

class MyForm(Form):
    checked = BooleanField('Check this box:')
    date = DateField('Date:', format='%Y-%m-%d', id="dates")
    submit = SubmitField('Submit')

模板：

{% 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 %}

Answer 1

您似乎在使用Flask-Bootstrap。

首先，确保在模板中包含 {% extends 'bootstrap/base.html' %}。如果没有这条线，您将失去 Flask-Bootstrap 包含在模板中的所有内容，例如 jQuery。

其次，您将覆盖 scripts 块。这是 Flask-Bootstrap 包含 jQuery 的地方。为了在不丢失基本版本的情况下将自己的东西放在那里，您需要使用Jinja's super function。它将包含父模板的 scripts 块以及您自己的块。

进行这些更改后，您的模板应该看起来像

{% 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 %}