FlaskForm wtforms multiple input fields single submit

Question

Using FlaskForm and SelectMultipleField, I'm creating a table of choices allowing for multiple selection to be ranked: 1, 2, 3, ... .

In order to place the choices in a grid pattern on a table, I made each row it's own instance of SelectMultipleField.

The submit button is only returning the values of the first instance of SelectMultipleField (dogs).

How can I get the submit button to return values in all instances of SelectMultipleField?

Here's the class in my forms module:

class LPRForm(FlaskForm):
    party = ['Dogs', 'Cats', 'Rabbits', 'Birds']
    dog = [('', 'D. Duke'), ('', 'R. Rusty'), \
             ('', 'T. Tucker'), ('', 'R. Roger')]
    cat = [('', 'S. Shadow'), ('', 'M. Misty'), \
             ('', 'P. Patch'), ('', 'P. Paws')]
    rabbit = [('', ''), ('', 'C. Clover'), ('', ''), ('', '')]
    bird = [('', 'P. Pikachu'), ('', 'S. Starburst'), \
              ('', ''), ('', 'F. Flighty')]

    vote_dog = SelectMultipleField('District', choices=dog, 
                        option_widget=widgets.TextInput() )
    vote_cat = SelectMultipleField('District', choices=cat, 
                        option_widget=widgets.TextInput() )
    vote_rabbit = SelectMultipleField('District', choices=rabbit, 
                        option_widget=widgets.TextInput() )
    vote_bird = SelectMultipleField('District', choices=bird, 
                        option_widget=widgets.TextInput() )

    submit = SubmitField('Cast Ballot')

Here's the relevant protion of the html file:

<table style="width:100%" align="center">
    <tr>
    <td>  </td>
    {% for vote in form.vote_dog %}
        {% if vote.label != '': %}
            <td>{{ vote(size="2") }}</td> <td>{{ vote.label }}</td>

        {% endif %}
    {% endfor %}
    </tr>

    <tr>
    <td>  </td>
    {% for vote in form.vote_cat %}
        {% if vote.label != '': %}
            <td>{{ vote(size="2") }}</td> <td>{{ vote.label }}</td>

        {% endif %}
    {% endfor %}
    </tr>

    <tr>
    <td>  </td>
    {% for vote in form.vote_rabbit %}
        {% if vote.label != '': %}
            <td>{{ vote(size="2") }}</td> <td>{{ vote.label }}</td>

        {% endif %}
    {% endfor %}
    </tr>

    <tr>
    <td>  </td>
    {% for vote in form.vote_bird %}
        {% if vote.label != '': %}
            <td>{{ vote(size="2") }}</td> <td>{{ vote.label }}</td>

        {% endif %}
    {% endfor %}
    </tr>
</table>
</td>
</tr>

{{ form.submit }}

And the view module:

@app.route('/lpr', methods=['GET', 'POST'])
def lpr():
    form = LPRForm() 
    return render_template('lpr.html', title='Home', form=form)

Does your html template have the form tags? Also lpr() will need form = LPRForm(request.POST) or similar, otherwise you are always processing a new form with no user data submitted (the form for GET method). — progmatico
– progmatico, Commented Feb 3, 2018 at 19:16
@progmatico My template does not have form tags. I'm using form=LPRForm() and the browser is submitting the user data back to the server. What's the purpose of request.POST? — David Collins
– David Collins, Commented Feb 4, 2018 at 20:26
Humm... Your code is ok. I suggested the usual pattern with bottle and WTForms. Looks like Flask has slight differences, the pattern does not apply. request.POST gets you a MultiDict in bottle and then you instantiate the form with it as a template for the form object attributes (after the post action the fields will be filled). I think from the Flask docs there is no request.POST, and looks like it is not needed this way. Probably request.form gives the same thing. — progmatico
– progmatico, Commented Feb 5, 2018 at 20:23

David Collins · Accepted Answer · 2018-02-04 20:32:17Z

1

I was able to get this working by using FormField. However, the documentation gives a default separator as -. Additionally, I explicitly identified separator='-', but only when I used . as a separator, when calling the class, did it work properly, ... even with separator='-'.

answered Feb 4, 2018 at 20:32

David Collins

9004 gold badges12 silver badges29 bronze badges

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

Collectives™ on Stack Overflow

FlaskForm wtforms multiple input fields single submit

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related