flask-wtf same form on same page using for loop

Question

I'm brand new to programming. I came up with a project to help me learn and I'm stuck already. I'm using Flask, Flask-SQLAlchemy and Flask-wtf.

I'm trying to create a club attendance system that lists members and checks them off if they are present and logs the amount they paid (either $15 for 1 lesson, or $25 for the week). I have a table that I populate from my database that looks like this:

I want to click on submit to mark the person as present but this ticks the checkbox for everyone in the list and sets the amount paid to the same for everyone.

I have tried lots of things. I have seen similar issues here and people suggesting using FieldList and FormField - I tried this with no luck. Here is my Form code:

class MemberForm(Form):
    form_id = HiddenField()
    member_id = DecimalField('id')
    member_name = StringField('name')
    attend_date = StringField('date', default=todays_date())
    is_here = BooleanField('here')
    has_paid = SelectField('Amount', choices=[(15, '15'), (25, '25')])
    submit = SubmitField("Submit")

    def __init__(self, *args, **kwargs):
        super(MemberForm, self).__init__(*args, **kwargs)
        read_only(self.member_name)

My controller code:

@app.route('/', methods=['GET', 'POST'])
def home():
    members = Member.query.order_by(Member.name).all()

    form = MemberForm()

    if request.method == 'POST': # TODO form validation and database stuff
        print('got this far')
        print(form.data)


    return render_template('index.html', title='Tong Long',
                           today=todays_date(), members=members,
                           form=form)

and the jinja2 template part:

<table width="483" border="1">
    <tbody>
    <tr>
        <th width="271"><strong>Member</strong></th>
        <th width="152"><strong>Grade</strong></th>
        <th><strong>Last Seen</strong></th>
        <th width="38"><strong>Paid?</strong></th>
        <th><strong>Is Here?</strong></th>
        <th>Submit</th>
    </tr>

    {% for member in members %}
    <form action="" method="post" name="{{ member.id }}">
        <tr>
            <td>{{form.member_name(value=member.name)}}</td>
            {% for g in member.grade %}
            <td>{{ g.grade }}</td>
            {% endfor %}
            <td>{{ form.attend_date }}</td>
            <td>{{ form.has_paid }}</td>
            <td>{{form.is_here}}</td>
            <td>
                {{ form.submit }}
            </td>
        </tr>

    </form>
    {% endfor %}

    </tbody>
</table>

Viewing the rendered HTML I can see that all the fields have the same id.
I'm starting to think this can't be done with WTForms. Will I need to use javascript perhaps (something I know nothing about). Or manually create the forms rather than using WTF? Any help appreciated!

Answer 1

This is very late, but perhaps it is helpful to somebody.

What calabash is doing, is create one single form and then display it multiple times in the template.

However, to achieve the desired outcome (independend forms with independend submit buttons), multiple forms need to be created within the route function. They can be passed as a list to the template and then looped over. (A simpler solution would be one form with one submit button and dynamically created "lines" for each member. See FieldList...)

Logic:

def home():
    members = Member.query.order_by(Member.name).all()
    forms = []
    for member in members:
        form = MemberForm(prefix=member.name)
        form.member_name.data = member.name
        forms.append(form)

    # validation:
    for form in forms:
        if form.submit.data and form.validate_on_submit():
            # do_something here for each form, e.g. write to database

    return render_template('index.html', title='Tong Long',
                          today=todays_date(),
                          forms=forms,
                          members=members)

The different forms need to have individual prefixes. They need to be validated individually and it needs to be checked which submit-button was used.

Note: It is perhaps not a good idea to use a form field for the name, as that information is already known from the members database entry and it might not be intended to change it here. A simple text label would make more sense in that case.

The table rows in the template could look like this:

{% for form in forms %}
<form action="" method="post">
{{ form.hidden_tag() }}
    <tr>
        <td>{{ form.member_name }}</td>
        <td>{{ members[loop.index0].grade }}</td>
        <td>{{ form.attend_date }}</td>
        <td>{{ form.has_paid }}</td>
        <td>{{ form.is_here }}</td>
        <td>{{ form.submit }}</td>
    </tr>
</form>
{% endfor %}