Formsets and Javascript not working in Django

Using Django Templates & Frontend
1

I have a Django resume builder project and there is a Certificates section. Whereby, a user can enter their certificates in a form set. However, my form set is not working, I’m executing it with Javascript. When a form is entered, it seems that only the first form entry is saved, but the rest are not saved. What changes should i make so that all forms can be saved?

These are the code snippets:

forms.py:

class CertificatesForm(forms.ModelForm):
class Meta:
model = certificates
fields = [‘certificate’, ‘issuer’, ‘issuedate’, ‘description’]
labels = {
‘certificate’: ‘Certificate’,
‘issuer’: ‘Issuer’,
‘issuedate’: ‘Issuer Date’,
‘description’: ‘Description’,
}
CertificatesFormSet = formset_factory(CertificatesForm)

views.py:

@login_required
def certificate_v(request):
if request.method == ‘POST’:
formset = CertificatesFormSet(request.POST, prefix=‘certificates’)
if formset.is_valid():
for form in formset:
form.save()
return redirect(‘preview’)
else:
formset = CertificatesFormSet(prefix=‘certificates’)

return render(request, 'certificates.html', {'formset': formset})

certificates.html:

{% extends “base.html” %}
{% block content %}

{% csrf_token %} {{ formset.management_form }} 
<div id="form-container">
    {% for form in formset %}
        <div class="certificate-form">
            {{ form.as_table }}
        </div>
    {% endfor %}
</div>

<button type="button" id="add-certificate-btn">Add Certificate</button>
<button type="submit">Submit</button>

{% endblock %}

javascript associated:

document.addEventListener('DOMContentLoaded', function () { const formContainer = document.getElementById('form-container'); const addCertificateBtn = document.getElementById('add-certificate-btn'); addCertificateBtn.addEventListener('click', function () { const formIndex = formContainer.childElementCount; const formPrefix = `certificates-${formIndex}`; const newForm = document.createElement('div'); newForm.className = 'certificate-form'; newForm.innerHTML = document.getElementById('empty-form-template').innerHTML.replace(/__prefix__/g, formPrefix); const deleteBtn = document.createElement('button'); deleteBtn.type = 'button'; deleteBtn.innerText = 'Delete Certificate'; deleteBtn.addEventListener('click', function () { newForm.remove(); }); newForm.appendChild(deleteBtn); formContainer.appendChild(newForm); }); });

type=“text/template” id=“empty-form-template”>
{{ formset.empty_form.as_table }}

2

Side note: When posting code here, enclose the code between lines of three backtick - ` characters. This means you’ll have a line of ```, then your code, then another line of ```. This forces the forum software to keep your code properly formatted.

You don’t need to repost this code, you can edit your original post to correct this.

Briefly, it looks to me like you’re not updating the ManagementForm

3

Hi Kenwhitesell, Thank you so much for your comment and suggestions, this is my first post on here, so I will implement those changes. About the management form : I rendered it in the HTML as instructed on the page you linked. What do you mean by updating it and what should I do to make sure it is updating? thank you for your feedback!!!

4

It’s explained in the referenced docs. I think if you search the forum here for formsets you may find other references as well