Form in a dynamic HTML table - django

Question

I am trying to create a HTML table, with a 2 fields on each row for the user to fill in (sports matches predictions). It loads data from one table(List) and should write into another one (Predictions)
Right now I have a cycle which loops through the matches and based on that creates the HTML table.
input.html
{% block body %}
<form method="post">
{% csrf_token %}
<table class="table">
<tr>
<th>Round</th>
<th>Date</th>
<th>Time</th>
<th>Home</th>
<th class="col-md-1"></th>
<th class="col-md-1"></th>
<th class="col-md-1"></th>
<th>Away</th>
</tr>
{% for item in query_results %}
<tr>
<td>{{ item.match_round }}</td>
<td>{{ item.match_date }}</td>
<td>{{ item.match_time }}</td>
<td>{{ item.home_team_name }}</td>
<td>{{ form.home_goals_predictions|add_class:"form-control"}}</td>
<td class="text-center">:</td>
<td>{{ form.away_goals_predictions|add_class:"form-control"}}</td>
<td>{{ item.away_team_name }}</td>
</tr>
{% endfor %}
</table>
<button type="submit" class="btn btn-success">Submit</button>
</form>
{% endblock %}
This is works and displays the table excatly as I want.
However I am not able to extract the data as I want from it - to be more exact, when submiting the form, the data from the last row gets assigned to all the rows.
views.py
query_results = List.objects.all()
form = PredictionsForm()
if request.method == 'POST':
form = PredictionsForm(request.POST)
if form.is_valid():
user_prediction = form.save(commit = False)
for result in query_results.all():
for home_goals_predictions, away_goals_predictions in form.cleaned_data.items():
user_prediction.id = result.id
user_prediction.match_round = result.match_round
user_prediction.home_team_name = result.home_team_name
user_prediction.away_team_name = result.away_team_name
user_prediction.user_id = request.user.id
user_prediction.home_goals_predictions = form.cleaned_data['home_goals_predictions']
user_prediction.away_goals_predictions = form.cleaned_data['away_goals_predictions']
user_prediction.save()
return redirect('/matches/')
else:
return redirect('/matches/')
else:
template = loader.get_template('matches/input.html')
context = {
'query_results': query_results,
'form': form
}
return HttpResponse(template.render(context, request))
forms.py
class PredictionsForm(forms.ModelForm):
home_goals_predictions = forms.IntegerField(widget=forms.Textarea(attrs={'cols': 1, 'rows': 1, 'maxlength': '2'}))
away_goals_predictions = forms.IntegerField(widget=forms.Textarea(attrs={'cols': 1, 'rows': 1, 'maxlength': '2'}))
class Meta:
model = Predictions
fields = ('home_goals_predictions', 'away_goals_predictions')
I would really appreciate the help, as I am stuck on this problem and cannot figure out correct solution using formset/for loop.

Answer 1

I'm not entirely sure what's going on in your code since I can't see the definition of query_results but I'm pretty sure that what you are looking for is formsets. In short, a form submit's one thing / record. A formset is as the name suggest a set of forms, see the documentation for a full example. Also take a look at modelformsets, depending on your usecase this might really come in handy as well.
Edit:
Yeah so I would definitely go the modelformset route. Here's a short example of what that would like
in your views.py (the GET request).
from django.forms import modelformset_factory
ListFormSet = modelformset_factory(List, form=ListForm, extra=0)
list_formset = ListFormSet(queryset=List.objects.all())
Then during POST you can just do
ListFormSet = modelformset_factory(List, form=ListForm, extra=0)
list_formset = ListFormSet(request.POST, queryset=List.objects.all())
if list_formset.is_valid():
for list_form in list_formset:
list_form.save()
analogue to how a normal single form works.
Then in your template
<form enctype="multipart/form-data" method="post">
{{ list_formset.management_form }}
{% for list_form in list_formset %}
...
{{ list_form.instance.match_round }}
...
{{ list_form.home_goals_predictions }} #formfield
{{ list_form.away_goals_predictions }} #formfield
{% endfor %}
</form>
As you can see it is possible to access the query data via .instance
note: I typed this from memory so you might have to debug some typo's.