How to use a WTForms FieldList of FormFields?
For starters, there's an argument for the FieldList called min_entries
, that will make space for your data:
class CompanyForm(Form):
company_name = StringField('company_name')
locations = FieldList(FormField(LocationForm), min_entries=2)
This will setup the list the way you need. Next you should render the fields directly from the locations
property, so names are generated correctly:
<form action="" method="post" role="form">
{{ companyForm.hidden_tag() }}
{{ companyForm.company_name() }}
{{ companyForm.locations() }}
<input type="submit" value="Submit!" />
</form>
Look at the rendered html, the inputs should have names like locations-0-city
, this way WTForms will know which is which.
Alternatively, for custom rendering of elements do
{% for l in companyForms.locations %}
{{ l.form.city }}
{% endfor %}
(in wtforms alone l.city
is shorthand for l.form.city
. However, that syntax seems to clash with Jinja, and there it is necessary to use the explicit l.form.city
in the template.)
Now to ready the submitted data, just create the CompanyForm
and iterate over the locations:
for entry in form.locations.entries:
print entry.data['location_id']
print entry.data['city']
Related videos on Youtube
kramer65
Updated on July 09, 2022Comments
-
kramer65 almost 2 years
I'm building a website using Flask in which I use WTForms. In a Form I now want to use a FieldList of FormFields as follows:
class LocationForm(Form): location_id = StringField('location_id') city = StringField('city') class CompanyForm(Form): company_name = StringField('company_name') locations = FieldList(FormField(LocationForm))
so to give people the ability to enter a company with two locations (dynamic adding of locations comes later) I do this on the front side:
<form action="" method="post" role="form"> {{ companyForm.hidden_tag() }} {{ companyForm.company_name() }} {{ locationForm.location_id() }} {{ locationForm.city() }} {{ locationForm.location_id() }} {{ locationForm.city() }} <input type="submit" value="Submit!" /> </form>
So on submit I print the locations:
print companyForm.locations.data
but I get
[{'location_id': u'', 'city': u''}]
I can print the values of the first location using the locationForm (see below), but I still don't know how to get the data of the second location.
print locationForm.location_id.data print locationForm.city.data
So the list of locations does have one dict with empty values, but:
- Why does the list of locations have only one, and not two dicts?
- And why are the values in the location dict empty?
Does anybody know what I'm doing wrong here? All tips are welcome!
-
kramer65 about 9 yearsThank you for your answer. That indeed enables me to create the fields in html. One more question:
companyForm.locations()
creates a<ul>
containing a table with inputs for each location. But I obviously want to create the formatting myself so that it will blend into my design. Do you have any idea how I can create the the individual inputs without the tables surrounding it so that I can do the styling myself? -
Jaime Gómez about 9 yearsWell... there's always a point where you have to take over manually if you need to control the experience, in this case the only thing you really need is to have inputs with the right name, so go ahead and do that, as long as you have an
<input name=locations-0-city>
things will work out :) -
kramer65 about 9 yearsAh, I already thought so. At least now I know what
name
the inputs need to have. Thanks for helping out! -
Hugo about 5 years@kramer65 in case you haven't already found the answer elsewhere, you can iterate over
companyForm.locations()
using Jinja in the template - the individual items will only be the relevant HTML inputs without any extra list or table markup. -
Tri over 4 yearsHow to change the
locations-0-city
to start the number with 1, so I want thelocations-1-city
is default value on that. -
anvd almost 4 yearsIn my case I had to add {{ l.form.hidden_tag() }} to the iteration