使用 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 的super功能。它将包括父模板的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 %}