CODEWITHSUNDEEP
pythonflaskjinja2wtforms
Oamar Kanji
Oamar Kanji

Reputation: 2224

How to render a WTF Form in flask from a template that is included in another template?

I would like to include the template for a WTF form in my home.html page like so: {% include "users/register.html" %} while keeping the code that renders home.html and the form register.html separate as shown below.

I have a home page 'home.html' that is being routed by the 'index()' function in my 'app.py' file.

'app.py' also registers the blueprint 'user_blueprint' that is defined in the 'views.py' file.

I have a function 'sign_up' that renders a wtf form in a template called 'register.html'.

In home.html I want to do this: {% include "users/register.html" %}. My understanding is that this does not work because form is not being passed to home.html and including register.html in home.html is essentially like copying it and the form object will not be passed to home.html

How can I go about rendering the template 'register.html' while maintaining the blueprint (and not just copying the form into 'index()')? Although perhaps this is not the best approach, in which case what would you suggest? Thanks

app.py

import...

app = Flask(__name__)
app.config.from_object('config')
app.secret_key = "123"

UPLOAD_FOLDER = os.path.join(app.root_path, 'static/img/products/')
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER


@app.before_first_request
def init_db():
    Database.initialize()


@app.route('/')
@app.route('/home')
def index():
    products = Product.find_all()
    return render_template('home.html', title='Home', products=products)

app.register_blueprint(user_blueprint, url_prefix="/users")

views.py

user_blueprint = Blueprint('users', __name__)


class RegisterUser(FlaskForm):
    first_name = StringField('first_name', validators=[DataRequired()])
    last_name = StringField('last_name', validators=[DataRequired()])
    email = StringField('email', validators=[DataRequired()])
    password = StringField('password', validators=[DataRequired()])


@user_blueprint.route('/register', methods=['GET', 'POST'])
def sign_up():
    form = RegisterUser(request.form)
    if request.method == 'POST' and form.validate():
        first_name = form.first_name.data
        last_name = form.last_name.data
        email = form.email.data
        password = form.password.data
        print(first_name)

    try:
        if User.register_user(first_name, last_name, email, password):
            session['email'] = email
            return redirect(url_for("index"))
    except UserErrors.UserError as e:
        return e.message

    return render_template('users/register.html')  

return render_template('users/register.html', form=form)

register.html

{% from "_formhelpers.html" import render_field %}
<form method=post>
    <dl>
        {{ render_field(form.first_name) }}
        {{ render_field(form.last_name) }}
        {{ render_field(form.email) }}
        {{ render_field(form.password) }}
    </dl>
    <p><input type=submit value=register>
</form>

home.html, excluding non relevant html

{% include "users/register.html" %}

Upvotes: 0

Views: 1256

Answers (1)

Daniel da Rocha
Daniel da Rocha

Reputation: 947

The way I would do is to have the form passed to home.html via the index() route and include it into your home using {% include "users/register.html" %}, but then register the action of the form to the sign_up() route which processes the form.

This way you keep the display fo the form and the processing of the form on separate routes... then after you process the form in the sign_up() route, you can direct the user to any other page.

Upvotes: 1

Related Questions