选择日期时自动提交含DateField的Flask-WTF表单

我用Bootstrap 5和Flask-WTF（Python 3.11）搭建网页，表单里有个日期选择器，目前通过SubmitField提交按钮能正常提交表单，但希望选择日期时自动提交表单，无需点击按钮。

我的Flask-WTF表单类代码：

class DateForm(FlaskForm):
    datum = DateField('Datum', validators=[DataRequired()])
    nurabwmabanz = BooleanField('nur abwesende Mitarbeiter anzeigen')
    submit = SubmitField('Aktualisieren')

对应的HTML代码：

<form method="POST" action="">
    {{ form.hidden_tag() }}
    <a role="button" class="btn btn-outline-info float-start me-1 mt-4 pt-3 pb-3" href="{{ url_for('abwesenheitslistebase') }}">h</a>
    {{ form.submit(class="btn btn-outline-info me-3 float-end mt-4 pt-3 pb-3") }}
    <fieldset class="form-group">
        <div class="form-group col-3">
            {{ form.datum.label(class="form-control-label mt-1 ms-2") }}
            {% if form.datum.errors %}
                {{ form.datum(class="form-control form-control-lg is-invalid") }}
                <div class="invalid-feedback">
                    {% for error in form.datum.errors %}
                        <span>{{ error }}</span>
                    {% endfor %}
                </div>
            {% else %}
                {{ form.datum(class="form-control form-control-lg col-1", value=abwdatum) }}
            {% endif %}
        </div>
    </fieldset>
        <div>
            {{ form.nurabwmabanz(checked=cbnurabwmabanz) }}{{ form.nurabwmabanz.label(class="form-control-label mt-1 ms-2") }}
        </div>
</form>

解决方案 #

核心思路是给日期输入框添加JavaScript事件监听，在日期选择完成后自动触发表单提交。

1. 给日期输入框添加ID（可选但便于定位） #

渲染日期输入框时加上id属性，方便后续JS定位：

{{ form.datum(class="form-control form-control-lg col-1", value=abwdatum, id="datum-picker") }}

2. 添加自动提交的JavaScript代码 #

在页面的<script>标签中（或表单末尾）插入以下代码：

// 获取日期选择器和表单元素
const datePicker = document.getElementById('datum-picker');
const targetForm = datePicker.closest('form');

// 监听日期变化事件，触发表单提交
datePicker.addEventListener('change', () => {
    targetForm.submit();
});

3. 可选：隐藏或移除提交按钮 #

如果不需要保留手动提交按钮，可直接删除{{ form.submit(...) }}这一行，或用Bootstrap的d-none类隐藏：

{{ form.submit(class="btn btn-outline-info me-3 float-end mt-4 pt-3 pb-3 d-none") }}

额外优化：复选框也自动提交（可选） #

如果希望勾选nurabwmabanz复选框时也自动提交，可补充以下JS代码：

const checkbox = document.querySelector('input[name="nurabwmabanz"]');
checkbox.addEventListener('change', () => {
    targetForm.submit();
});

内容的提问来源于stack exchange，提问作者Erbs