Search code examples
flaskdynamicjinja2flask-wtformswtforms

Flask WTForm from list of field labels


I am trying to create a dynamic form from a given list of labels using Flask, WTForms and Jinja2. The form should contain a StringField for every given label. My current approach is to use a FieldList like in the code below.

My problem with this approach is, that I can't distinguish between the keys in the dictionary of each request.

request.form gives me this ImmutableMultiDict([('text', ''), ('text', ''), ('submit', 'submit')]) with key duplicates.

How can I find out which value was entered into which StringField?

Ideally request.form should look like this ImmutableMultiDict([('field 1', ''), ('field 2', ''), ('submit', 'submit')]).

Front end (index.html)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <form action="" method="post">
            {% for entry in form.entries %}
                <p>{{entry.text.label}}: {{ entry.text }}</p> 
            {% endfor %}
            <p>{{form.submit()}}</p>
        </form>
    </body>
</html>

Back end

from wtforms import FieldList, FormField, StringField, SubmitField
from flask_wtf import FlaskForm


class TextForm(FlaskForm):
    text = StringField('Placeholder')

class TextListForm(FlaskForm):
    entries = FieldList(FormField(TextForm))
    submit = SubmitField(u'submit')


from flask import Flask, render_template, request

app = Flask(__name__)
app.config.update(
    SECRET_KEY = 'asdf',
)
field_names = ["field 1", "field 2"]


@app.route('/', methods=['POST', 'GET'])
def index():
    fields = []
    for name in field_names:
        text_entry = TextForm()
        text_entry.text.label = name
        fields.append(text_entry)

    form = TextListForm()
    form.entries = fields

    if form.is_submitted():
        print(request.form)

    return render_template('index.html', form=form)

if __name__ == '__main__':
    app.run(debug=True)

Output: ImmutableMultiDict([('text', ''), ('text', ''), ('submit', 'submit')])


Solution

  • I just forgot to set the field name: text_entry.text.name = name

    @app.route('/', methods=['POST', 'GET'])
    def index():
        fields = []
        for name in field_names:
            text_entry = TextForm()
            text_entry.text.label = name
            text_entry.text.name = name
            fields.append(text_entry)
    
        form = TextListForm()
        form.entries = fields
    
        if form.is_submitted():
            print(request.form)
    
        return render_template('index.html', form=form)
    

    Now the desired dict is returned: ImmutableMultiDict([('field 1', ''), ('field 2', ''), ('submit', 'submit')])