Flask WTForm render selected with Bootstrap

Question

This is a really simple question but I cannot seem to find a good answer.

I have existing data stored about a user's selection and want to render that selection as selected in the dropdown.

{% macro render_bootstrap_field(field) %} <div class="form-group {% if field.errors %} error {% endif %}"> <label class="col-lg-2 control-label">{{ field.label }}</label> <div class="col-lg-8"> {{ field(class='form-control')|safe }} {% if field.errors %} {% for error in field.errors %} <span class="help-inline">[{{ error }}]</span><br> {% endfor %} {% endif %} </div> </div> {% endmacro %}}

And here is how this is rendered:

{{ render_bootstrap_field(form.gender) }}

It doesn't show what's selected and I cannot think of a way besides using jquery to add the class manually, but that would be a pain.

Thanks so much for the help!

Edit: forgot to include my view.py function! So I did set it

@app.route('/edit_user', methods=['GET', 'POST']) @login_required def edit_user(): form = UserInfoForm(g.user.nickname) form.gender.choices = app.config['GENDER'] form.year.choices = app.config['BIRTH_YEAR'] form.education.choices = app.config['EDUCATION'] if request.method == 'POST' and form.validate_on_submit(): flash("submitting") g.user.nickname = form.nickname.data g.user.gender = form.gender.data g.user.education = form.education.data g.user.year = form.year.data g.user.info_complete = True db.session.add(g.user) db.session.commit() return redirect(url_for('edit_user')) elif request.method != "POST": form.nickname.data = g.user.nickname form.gender.data = g.user.gender form.education.data = g.user.education form.year.data = g.user.year return render_template('edit_user.html', form=form, user=g.user)

Problem found!

In case you are running into the same problem --- check your encoding! My unicode was throwing normal string off.

Miguel Grinberg · Accepted Answer · 2013-11-26 05:00:49Z

4

This is not done in the template, you have to do it on the Form object before you call render_template().

For example:

form.gender.data = 'male'

answered Nov 26, 2013 at 5:00

Miguel Grinberg

68.1k14 gold badges143 silver badges160 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

yifanwu Over a year ago

Hi Miguel! I'm a huge fan of your tutorial! Anyways I added some more details --- I did set it though in the view. It just doesn't show on the viewing part. I blame Bootstrap.

Miguel Grinberg Over a year ago

Are you assigning a valid value to the field? It has to be one of the choices, and also has to be the choice "name", not the "value".

yifanwu Over a year ago

OK found it! I had # coding: utf8 in my config file so the form was not recognizing despite the strings seeming to be the same : / Now it's fixed but it's ugly (need to convert int to string to unicode...) I'm using some Chinese so have to have unicode.

Miguel Grinberg Over a year ago

Why don't you use unicode all around? Your form class, templates and view functions should all be using the same encoding.

Doobeh · Accepted Answer · 2013-11-26 15:02:20Z

Miguel is correct-- here's a complete working example:

#app.py from flask import Flask, render_template from flask_wtf import Form from wtforms import SelectField app = Flask(__name__) app.secret_key = 'Testing BS' choices = [ ('1', 'Alice'), ('2', 'Bob'), ('3', 'Carol'), ] class MyForm(Form): name = SelectField('Pick Name', choices=choices) @app.route('/', methods=['post','get']) def hello_world(): form = MyForm() form.name.data = '2' # lets set Bob to be active. return render_template('example.html', form=form) if __name__ == '__main__': app.run(debug=True)

And the Template:

#example.html {% macro render_bootstrap_field(field) %} <div class="form-group {% if field.errors %} error {% endif %}"> <label class="col-lg-2 control-label">{{ field.label }}</label> <div class="col-lg-8"> {{ field(class='form-control')|safe }} {% if field.errors %} {% for error in field.errors %} <span class="help-inline">[{{ error }}]</span><br> {% endfor %} {% endif %} </div> </div> {% endmacro %} <form method="POST" action="#"> {{ render_bootstrap_field(form.name) }} <input type="submit" value="Go"> </form>

Thanks Doobeh, turned out that the issue was with unicode, which I didn't include in the code sample. I'm sure others will find your sample helpful

Collectives™ on Stack Overflow

Flask WTForm render selected with Bootstrap

2 Answers 2

4 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Related