Flask WTForms 动态表单答案

【问题标题】：Flask WTForms dynamic formsFlask WTForms 动态表单
【发布时间】：2020-01-18 14:49:56
【问题描述】：

我是 HTML 新手，正在尝试为 Flask webservice 制作快速表单 UI。表单源自FlaskForm，并使用wtf.quick_form(...) 生成。我想做的是根据SelectField 中的选择显示/隐藏其他字段/表单。有人可以以最简单的自动方式为我提供指示或示例吗？到目前为止，我发现的所有内容都涉及花哨的 ajax 查询和/或 javascript。

如果我可以在单击 SelectField 中的字段时自动执行，我可以从 Flask 获取新的/更新的表单。

【问题讨论】：

标签： html flask wtforms

【解决方案1】：

我之前使用过类似于下面的方法（它确实依赖于一些简单的 JS）

run.py

class GraphicsForm(FlaskForm):
    choices = [("no", "No"), ("yes", "Yes")]
    select_graphics = SelectField(choices=choices)

# Plot parameters displayed only if 'yes' is selected to above.
class SubForm(FlaskForm):
    sub_choice = IntegerField("substrate_count", default=5)

@app.route("/upload", methods = ['GET', 'POST'])
def upload():
    sub_form = SubForm()
    plot_form = GraphicsForm()
    sub_choice = None
    select_graphics = None
    if request.method == 'POST':
        min_sub = sub_form.sub_choice.data
        graphics = plot_form.select_graphics.data
    return render_template("upload.html", sub_form=sub_form, plot_form=plot_form)

上传.html

  {{ plot_form.select_graphics(onchange="check_option();") }}

  {{ sub_form.sub_choice() }}

一些简单的 JS

# Displays plot-para field only if yes was selected to select-graphics field.
function check_option() {
    if(document.getElementById('select_graphics').value == "no"){
        document.getElementById('plot-para').style.display = 'none';
  } else {
        document.getElementById('plot-para').style.display = 'block';
    }
}

【讨论】：

【解决方案2】：

由于您想在浏览器中显示/隐藏某些字段，并且很可能不发送此表单，因此无论如何都必须使用一些 JavaScript，因为它是负责的前端字段。

您可能想查看 jQuery 来手动切换字段，或者使用带有一些插件的 Bootstrap4，这也会为您提供一些漂亮的外观。

【讨论】：

如果我可以从选择字段触发提交操作，我可以提交。有可能吗？