Flask WTF 表单:如果用户在 SelectMultipleField 中选择特定选项,是否可以显示新字段?



我刚开始使用Flask WTF表单。 我可以和他们一起做我需要的一切,除了我似乎无法弄清楚一件事。 我有一个多项选择字段向用户显示各种选项,如果用户选择"其他",我希望他们描述它们的含义。 喜欢这个:

impact = wtforms.SelectMultipleField('What is the expected impact?',
choices=[('Sales', 'Sales'),
('Lift', 'Lift'),
('Other', 'Other')]

我不知道当它不是一个具有自己的 ID 的独立字段而只是数组中的一个成员时,它是否可能。 你能帮忙吗?

编辑

这是我按照以下建议尝试的内容 - 从选择或取消选择"其他"没有区别的意义上说,它不起作用:

app.py:

app.route('/', methods=['GET', 'POST'])
def home():
form = MyForm()
other_enable = False
if form.validate_on_submit():
name = form.name.data
email = form.email.data
impact1 = form.impact.data
impact = ''.join(str(e) for e in impact1)
if ("Other" in impact):
other_enable = True
impact_other = form.impact_other.data
return redirect(url_for('home'))
return(render_template('home.html', form=form, other_enable=other_enable))

并且 templates/home.html 包含

{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
<center>
<div id="someid" onchange='myFunction(other_enable)'>{{ wtf.quick_form(form) }}</div>
</center>
{% endblock %}
<script>
function myFunction(other_enable) {
var theother = document.getElementById("otherField");
if (other_enable == true){
theother.style.display = "block";
} else {
theother.style.display = "none";
}
}
</script>

您必须在表单中添加另一个字段,例如TextField()并使其validator.Optional()

然后,使用简单的javascript和onchange事件,您可以默认display:none此字段,如果用户选择Other显示它。

最后,如果您希望强制用户"描述它们的含义",则可以在YourForm类中添加此方法:

def validate(self):
""" Add custom validators after default validate
"""
success = super(YourFormClass, self).validate()
if 'Other' in self.impact.data and len(self.impact_other.data) < 1:
success = False
self.impact.errors.append(gettext('Please fill impact_other field if you had selected "Other"'))
return success

(假设您创建的其他字段名为impact_other(

编辑:我稍微修改了我的validate((函数,以使用SelectMultilpleField而不是SelectField

。接下来,您不必将变量传递给模板other_enable默认情况下,如果未选择任何内容,则应隐藏otherField,因此您不仅需要在change上运行js,还需要在页面加载后运行js。

您只需要检查您的 js 函数,如果您的字段impact选择了"其他",如果是,则显示您的字段。您可以查看此问题以获取有关在JS中检测所选值的更多帮助:这里

此外,如果表单验证失败,您必须执行form = MyForm(request.form)以保存用户输入。

最新更新