multiple html form from a single form model in django - html

Question

i need your assistance
im building a school president vote tallying system
the vote results are saved in the polls table as
candidate id | pollingstationid | result |
when capturing the results the html page will render the form for each candidate. for example if there are 3 candidates the html form will have 3 forms:
candidate 1:
result _______
candidate id 1001
pollingstationid 301
candidate 2:
result _______
candidate id 1002
pollingstationid 301
candidate 3:
result _______
candidate id 1003
pollingstationid 301
[submit button]
the problem:
when i click submit, its only saving the last form(i.e candidate 3)
how do i get all three entries into the database each as a new row.
views.py
class candidatesview(AjaxFormMixin, View):
form_class = pollsForm
model = Polls
template_name = 'app/candidates.html'
def get(self, request):
form = self.form_class()
candidatesls = Candidates.objects.all()
context = {'title':'polls','form' : form, 'candidates': candidatesls }
#print(context)
return render(request, self.template_name, context )
def post(self, request):
form = pollsForm(request.POST)
candidatesls = Candidates.objects.all()
if form.is_valid():
print(form.cleaned_data['Result'])
print(form.cleaned_data['Candidateid'])
print(form.cleaned_data['PollingstationID'])
form.save()
messages.success(request,('Form submitted successfuly'))
else:
messages.warning(request,('nah!'))
print(messages)
context = {'title':'polls','form' : form, 'candidates': candidatesls, 'message':messages}
return render(request, self.template_name, context)
forms.py
class pollsForm(forms.ModelForm):
class Meta:
model = Polls
fields = ['Result', 'Candidateid','PollingstationID']
html (candidates.html)
{% extends "app/base.html" %}
{% load widget_tweaks %}
{% block content %}
<div class="bg-white">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-8">
{% if messages %}
{% for message in messages %}
<div class="alert alert-warning alert-dismissible show" role="alert">
{{ message }}
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="false">×</span>
</button>
</div>
{% endfor %}
{% endif%}
<div id="alertbox">
</div>
<div class="form-group">
<form class="my-ajax-form" method="POST" action="{% url 'polls' %}">
{% for hidden in form.hidden_fields %}
{{ hidden }}
{% endfor %}
{#{% for field in form.visible_fields %}#}
<table class="table">
{% for candidates in candidates %}
<tr>
<td>
{% render_field form.Result class="form-control" placeholder=candidates.CandidateName id=forloop.counter %}
<input type="number" class="form-control" id={{ forloop.counter }} value={{ candidates.CandidateID }}>
{% render_field form.PollingstationID type="hidden" class="form-control" id="C1_Pollingstation" %}
{% for error in field.errors %}
<span class="help-block">{{ error }}</span>
{% endfor %}
</td>
<td>
<div class="circle" style="background:{{ candidates.CandidateColor }}">2</div>
</td>
</tr>
{% endfor %}
</table>
<div class="pull-right">
<input type='submit' class='btn btn-next btn-fill btn-success btn-wd' name='Post' value='Post' />
</div>
</form>
</div>
</div>
</div>
</div>
<br />
{% endblock content %}
{% block javascript %}
<script>
$(document).ready(function(){
var $myForm = $(".my-ajax-form")
var $myMessage = $("#alertbox")
$myForm.submit(function(event){
event.preventDefault()
var $formData = $(this).serialize()
var $endpoint = $myForm.attr("data-url") || window.location.href
console.log($formData)
console.log($endpoint)
$.ajax({
method: "POST",
url: $endpoint,
data: $formData,
success: handleFormSuccess,
error: handleFormError,
})
function handleFormSuccess(data, textStatus, jqXHR){
console.log(data)
console.log(textStatus)
console.log(jqXHR)
$myForm[0].reset();
$myMessage.replaceWith('<div class="alert alert-success show" role="alert" id="alertbox"> post succcess</div> ');
}
function handleFormError(jqXHR, textStatus, errorThrown){
console.log(jqXHR)
console.log(textStatus)
console.log(errorThrown)
$myMessage.replaceWith('<div class="alert alert-warning show" role="alert" id="alertbox"> post failure</div> ');
}
})
})
</script>
{% endblock %}