flask-bootstrap quick_form missing Submit button

7.3k views Asked by At

Trying to use flask-bootstrap quick_form.

HTML template my-form.j2:

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

{% block content %}

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

{% endblock content %}

Form class:

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()])

Form handler:

@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)

Unfortunately I am not seeing a Submit button rendered, even if I add {{ form.submit }} to my table. Any ideas?

2

There are 2 answers

0
atwalsh On BEST ANSWER

I believe you can add the input field directly after {{ wtf.quick_form(form) }} and put both of these inside an HTML form:

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

Example

{% 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 %}
1
maje On

The answer of @atwalsh work just fine, but you can also put your submit button in your class, and then call it in your template:

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')

And then put in your template:

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

Edit: You also need to import the SubmitField method:

from wtforms import SubmitField