24

I have a Flask app in which I can populate form data by uploading a CSV file which is then read. I want to populate a FieldList with the data read from the CSV. However, when I try to populate the data, it enters raw HTML into the TextFields instead of just the value that I want. What am I doing wrong?

app.py

from flask import Flask, render_template, request, url_for
from flask.ext.wtf import Form
from wtforms import StringField, FieldList, FormField, SelectField
from wtforms.validators import DataRequired
from werkzeug.datastructures import MultiDict

app = Flask(__name__)
app.config['SECRET_KEY']='asdfjlkghdsf'

# normally student data is read in from a file uploaded, but for this demo we use dummy data
student_info=[("123","Bob Jones"),("234","Peter Johnson"),("345","Carly Everett"),
              ("456","Josephine Edgewood"),("567","Pat White"),("678","Jesse Black")]

class FileUploadForm(Form):
    pass

class StudentForm(Form):
    student_id = StringField('Student ID', validators = [DataRequired()])
    student_name = StringField('Student Name', validators = [DataRequired()])

class AddClassForm(Form):
    name = StringField('classname', validators=[DataRequired()])
    day = SelectField('classday', 
                      choices=[(1,"Monday"),(2,"Tuesday"),(3,"Wednesday"),(4,"Thursday"),(5,"Friday")],
                      coerce=int)

    students = FieldList(FormField(StudentForm), min_entries = 5) # show at least 5 blank fields by default

@app.route('/', methods=['GET', 'POST'])
def addclass():
    fileform = FileUploadForm()
    classform = AddClassForm()

    # Check which 'submit' button was called to validate the correct form
    if 'addclass' in request.form and classform.validate_on_submit():
        # Add class to DB - not relevant for this example.
        return redirect(url_for('addclass'))

    if 'upload' in request.form and fileform.validate_on_submit():
        # get the data file from the post - not relevant for this example.
        # overwrite the classform by populating it with values read from file
        classform = PopulateFormFromFile()
        return render_template('addclass.html', classform=classform)

    return render_template('addclass.html', fileform=fileform, classform=classform)

def PopulateFormFromFile():
    classform = AddClassForm()

    # normally we would read the file passed in as an argument and pull data out, 
    # but let's just use the dummy data from the top of this file, and some hardcoded values
    classform.name.data = "Super Awesome Class"
    classform.day.data = 4 # Thursday

    # pop off any blank fields already in student info
    while len(classform.students) > 0:
        classform.students.pop_entry()

    for student_id, name in student_info:
        # either of these ways have the same end result.
        #
        # studentform = StudentForm()
        # studentform.student_id.data = student_id
        # studentform.student_name.data = name
        #
        # OR
        student_data = MultiDict([('student_id',student_id), ('student_name',name)])
        studentform = StudentForm(student_data)

        classform.students.append_entry(studentform)

    return classform


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

templates/addclass.html

<html>
    <head>
        <title>Flask FieldList Demo</title>
    </head>
    <body>
        <h1>Add Class</h1>
        {% if fileform %}
        <div>
            <p>Add class from file:</p>
            <form action="" method="post" enctype="multipart/form-data" name="fileform">
                {{ fileform.hidden_tag() }}
                <p><input type="submit" name="upload" value="Upload"></p>
            </form>
        </div>
        <hr>
        {% endif %}
        <div>
            <form action="" method="post" name="classform">
                {{ classform.hidden_tag() }}
                Class Name: {{ classform.name }}<br>
                Day: {{ classform.day }}<br>
                <br>
                <div>
                    <table>
                        <tr>
                            <th> Student Number </th>
                            <th> Name </th>
                        </tr>
                        {% for student in classform.students %}
                        <tr>
                            <td>{{ student.student_id }}</td>
                            <td>{{ student.student_name }}</td>
                        </tr>
                        {% endfor %}
                    </table>
                </div>
                <p><input type="submit" name="addclass" value="Add Class"></p>
            </form>
        </div>
    </body>
</html>

The offending code snippet happens at the line classform.students.append_entry(studentform). I can post the output HTML if required. What I expect is something like this: Expected Output What I get instead is: enter image description here

2 Answers 2

44

OK, I spent hours on this and in the end it was such a trivial code change.

Most fields let you change their value by modifying the data attribute (as I was doing above). In fact, in my code, I had this comment as above:

    ### either of these ways have the same end result.
    #
    # studentform = StudentForm()
    # studentform.student_id.data = student_id
    # studentform.student_name.data = name
    #
    ### OR
    #
    # student_data = MultiDict([('student_id',student_id), ('student_name',name)])
    # studentform = StudentForm(student_data)

However, in the case of a FieldList of FormFields, we should not edit the data attribute, but rather the field itself. The following code works as expected:

for student_id, name in student_info:

    studentform = StudentForm()
    studentform.student_id = student_id     # not student_id.data
    studentform.student_name = name

    classform.students.append_entry(studentform)

I hope this helps someone experiencing the same problem.

3
  • I don't supose you have a gist with the complete standalone working example?
    – Chris Snow
    Nov 12, 2016 at 8:07
  • 8
    A gist with the example of this working is here.
    – Aaron D
    Apr 26, 2017 at 16:11
  • Awesome, I implemented this the wrong way, and was having a very hard time populating from the database for edit. Thanks for posting! May 16, 2017 at 13:56
8

In response to the accepted answer: The append_entry function expects data, not a Form. So if you approach it like this your code also works as you'd expect. With the added benefit of being easier to maintain

# First remap your list of tuples to a list of dicts
students = [dict(zip(["student_id","student_name"], student)) for student in student_info]
for student in students:
    # Tell the form to add a new entry with the data we supply
    classform.students.append_entry(student)
1
  • 1
    Interestingly, the WTForms documentation says that append_entry([data]) says that [data] is optional but doesn't explicitly state that it should be a dictionary - wtforms.readthedocs.io/en/2.2.1/fields/…
    – Ben
    Jul 7, 2020 at 21:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.