【问题标题】:flask-bootstrap quick_form missing Submit buttonflask-bootstrap quick_form 缺少提交按钮
【发布时间】:2018-02-07 15:11:12
【问题描述】:

尝试使用flask-bootstrap quick_form。

HTML 模板 my-form.j2:

{% import "bootstrap/wtf.html" as wtf %}
{% extends "layout.j2" %}

{% block content %}

<h1>My form</h1>
{{ wtf.quick_form(form) }}

{% endblock content %}

表单类:

class MyForm(FlaskForm):
    """A WTForm for configuring vehicle information"""
    field1 = StringField('First field', [wtforms.validators.required()])
    field2 = StringField('Second field', [wtforms.validators.required()])
    field3 = StringField('Third field', [wtforms.validators.required()])

表单处理程序:

@app.route('/myform', methods=('GET', 'POST'))
def my_form():
    form = MyForm()
    if form.validate_on_submit():
        myData = form.data
        return redirect("/")
    return render_template("my-form.j2", form=form)

不幸的是,即使我添加了提交按钮,我也没有看到呈现 {{ form.submit }} 到我的桌子上。 有什么想法吗?

【问题讨论】:

    标签: flask flask-wtforms flask-bootstrap


    【解决方案1】:

    @atwalsh 的答案工作得很好,但你也可以把你的提交按钮放在你的类中,然后在你的模板中调用它:

    class MyForm(FlaskForm):
        field1 = StringField('First field', [wtforms.validators.required()])
        field2 = StringField('Second field', [wtforms.validators.required()])
        field3 = StringField('Third field', [wtforms.validators.required()])
    --> submit_button = SubmitField('Submit Form')
    

    然后放入你的模板:

    {{ wtf.quick_form(form, button_map={'submit_button': 'primary'}) }}
                                ^            ^
    

    编辑: 您还需要导入 SubmitField 方法:

    from wtforms import SubmitField
                                        
    

    【讨论】:

    • 这是一种更优雅的方法。
    【解决方案2】:

    我相信您可以直接在{{ wtf.quick_form(form) }} 之后添加输入字段,并将这两个字段放入 HTML 表单中:

    <input class="btn btn-primary" type="submit" value="Login">
    

    示例

    {% import "bootstrap/wtf.html" as wtf %}
    {% extends "layout.j2" %}
    
    {% block content %}
    
    <h1>My form</h1>
    <form method="POST" action="/">
        {{ wtf.quick_form(form) }}
        <input class="btn btn-primary" type="submit" value="Login">
    </form>
    {% endblock content %}
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2013-12-05
      • 1970-01-01
      • 2018-08-22
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-03-23
      相关资源
      最近更新 更多