Asked 4 months ago by PulsarStargazer847
The post content has been automatically edited by the Moderator Agent for consistency and clarity.
I'm encountering two issues with my Django project when working with dynamically generated formsets via JavaScript. First, when submitting the data, I sometimes receive a 'CSRF verification failed. Request aborted.' error. Second, if I create 3 forms and then delete the second one, not only does the second form get removed but the third form also becomes blank.
Below is my current code setup. Any insights on resolving these issues would be greatly appreciated.
index.html:
DJANGO{% extends 'base.html' %} {% load crispy_forms_tags %} {% block content %} <div class="shadow-sm border rounded mt-2 mx-3" style=" min-height: 75vh;"> <div class="d-flex justify-content-between align-items-center m-3"> <h5 class="mx-2 text-slateblue" id="title"></h5> <div class="col"></div> <button type="button" class="btn btn-slateblue mx-2" data-bs-toggle="modal" data-bs-target="#TimesheetEntry" data-bs-whatever="@mdo"><i class="bi bi-plus-circle"></i> Add New Record</button> <form method="post" id="timesheetForm"> <div class="modal fade" id="TimesheetEntry" tabindex="-1" aria-labelledby="TimesheetEntryLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-scrollable modal-fullscreen d-flex justify-content-center"> <div class="modal-content"> <div class="modal-header row"> <h5 class="modal-title text-slateblue col" id="TimesheetEntryLabel">New Timesheet Entry</h5> <div class="col"></div> <button class="btn btn-slateblue col-2" type="button" id="addForm"><i class="bi bi-plus-circle"></i> Add entry</button> <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body" style="max-width: 100%; overflow-x: auto;"> {% csrf_token %} {{formset.management_form}} <div class="container-fluid" id="user-forms" style="width: 1800px;"> {% for form in formset %} <div class="row user-form" id="form-{{ forloop.counter0 }}"> <div class="" style="flex: 0 0 150px; max-width: 150px;"> {{form.emp_name|as_crispy_field }} </div> <div class="" style="flex: 0 0 200px; max-width: 200px;"> {{form.client_name|as_crispy_field }} </div> <div class="" style="flex: 0 0 300px; max-width: 300px;"> {{form.project_name|as_crispy_field }} </div> <div class="" style="flex: 0 0 300px; max-width: 300px;"> {{form.category|as_crispy_field }} </div> <div class="" style="flex: 0 0 300px; max-width: 300px;"> {{form.description|as_crispy_field }} </div> <div class="" style="flex: 0 0 150px; max-width: 150px;"> {{form.billable|as_crispy_field }} </div> <div class="" style="flex: 0 0 170px; max-width: 170px;"> {{form.date|as_crispy_field }} </div> <div class="" style="flex: 0 0 100px; max-width: 100px;"> {{form.hours|as_crispy_field }} </div> <!-- <div class="col"> --> {{form.approval.as_hidden}} <!-- </div> --> <div class="remove-col " style="flex: 0 0 100px; max-width: 100px;"> {% if forloop.counter0 > 0 %} <button type="button" class="remove-form btn btn-outline-danger" onclick="removeForm('{{forloop.counter0}}')">Remove</button> {% endif %} </div> </div> {% endfor %} </div> </div> <div class="modal-footer"> <p>Total Hours: <span class="fw-bold" id="total_hours"></span> </p> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="submit" class="btn btn-outline-slateblue" id="submit">Submit</button> </div> </form> </div> </div> </div> </div> <div class="container-fluid"> <div class="table-responsive " style=" height: 75vh; overflow-y: auto;"> <table id="myTable" class="table table-bordered table-striped border text-center rounded shadow-sm m-0"> <thead class="sticky-top top-0 shadow"> <tr> <!-- <th scope="col" style="background-color: #4E45AC; color: white;">#</th> --> <th scope="col" style="background-color: #4E45AC; color: white; min-width: 150px;">Emp. Name</th> <th scope="col" style="background-color: #4E45AC; color: white; min-width: 200px;">Client Name</th> <th scope="col" style="background-color: #4E45AC; color: white; white-space: normal; min-width: 200px;">Project Name</th> <th scope="col" style="background-color: #4E45AC; color: white; min-width: 300px;">Description</th> <th scope="col" style="background-color: #4E45AC; color: white; white-space: normal; min-width: 180px;">Category</th> <th scope="col" style="background-color: #4E45AC; color: white; white-space: normal; min-width: 100px;">Billable</th> <th scope="col" style="background-color: #4E45AC; color: white; white-space: normal; min-width: 150px;">Date</th> <th scope="col" style="background-color: #4E45AC; color: white;">Hours</th> <th scope="col" style="background-color: #4E45AC; color: white; white-space: normal; min-width: 130px;">Month</th> <th scope="col" style="background-color: #4E45AC; color: white; white-space: normal; min-width: 150px;">Week Start Date</th> <th style="background-color: #4E45AC; color: white;"></th> </tr> </thead> <tbody> {% for entry in entries %} <tr> <!-- <th scope="row">{{forloop.counter}}</th> --> <td style="text-align: left;">{{entry.emp_name.first_name}}</td> <td style="text-align: left;">{{entry.client_name}}</td> <td style="text-align: left;">{{entry.project_name}}</td> <td id="description">{{entry.description}}</td> <td id="description">{{entry.category}}</td> <td style="text-align: left;">{{entry.billable}}</td> <td class="date" style="text-align: right;">{{entry.date}}</td> <td>{{entry.hours}}</td> <td class="month" style="text-align: right;"></td> <td class="weekStartDate" style="text-align: right;"></td> {% if entry.approval != 'Approved' %} <td> <a href="{% url 'timesheet_update_view' id=entry.id %}?current_path=index"><i class=" bi bi-pencil-square"></i></a> <a href="#" data-bs-toggle="modal" data-bs-target="#DeleteTimesheetEntry-{{entry.id}}" onclick=""><i class="mx-2 text-danger bi bi-trash3"></i></a> <div class="modal fade" id="DeleteTimesheetEntry-{{entry.id}}" tabindex="-1" aria-labelledby="TimesheetEntryLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered modal-md"> <div class="modal-content"> <div class="modal-body"> <div class="container border"> <div class="row my-4"> <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="red" class="bi bi-exclamation-circle" viewBox="0 0 16 16"> <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" /> <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z" /> </svg> </div> <div class="row my-2"> <h5>Are you sure you want to delete this entry ?</h5> </div> <div class="row my-2"> <h7>Deleting records from this directory cannot be undone {{entry.id}}</h7> </div> <div class="row my-4"> <div class="col"> <a href="{% url 'timesheet_delete_view' id=entry.id %}" class="btn btn-danger">Delete</a> </div> <div class="col"> <div class="btn btn-secondary" data-bs-dismiss="modal">Cancel</div> </div> </div> </div> </div> </div> </div> </div> </td> {% else %} <td></td> {% endif %} </tr> {% endfor %} </tbody> <tfoot class="sticky-bottom bottom-0 shadow"> <tr id="foot" style="border-top: solid 2px #4E45AC; "> <!-- <th scope="col"></th> --> <th scope="col"></th> <th scope="col"></th> <th scope="col"></th> <th scope="col"></th> <th scope="col"></th> <th scope="col"></th> <th scope="col"></th> <th scope="col"></th> <th scope="col"></th> <th scope="col"></th> <th></th> </tr> </tfoot> </table> </div> </div> </div> <script> var title = document.getElementById('title'); let currentDate = new Date(); let currentMonth = currentDate.toLocaleString('default', { month: 'long' }); let year = currentDate.getFullYear(); title.innerHTML = `Timesheet For ${currentMonth} ${year}` $(document).ready(function(){ {% if formset_errors %} $('#TimesheetEntry').modal('show'); {% endif %} }); function handleInput(event) { var target = event.target; if (target.classList.contains("numberinput")) { var max = parseFloat(target.getAttribute("max")); if (parseFloat(target.value) > max) { target.value = max; } } var numberInputs = document.getElementsByClassName("numberinput"); var sum = 0; for (var i = 0; i < numberInputs.length; i++) { var inputValue = parseFloat(numberInputs[i].value); if (!isNaN(inputValue)) { sum += inputValue; } } document.getElementById('total_hours').innerText = sum; } document.body.addEventListener("input", handleInput); let addButton = document.querySelector("#addForm"); let totalForms = document.querySelector("#id_form-TOTAL_FORMS"); addButton.addEventListener('click', addForm); function addForm(e) { e.preventDefault(); let formsContainer = document.querySelector("#user-forms"); let lastForm = formsContainer.lastElementChild; let newForm = lastForm.cloneNode(true); let inputs = newForm.querySelectorAll('.form-control'); inputs.forEach(input => { input.value = null; }); let labels = newForm.querySelectorAll('label'); labels.forEach(label => { label.remove(); }); let formNum = formsContainer.querySelectorAll(".user-form").length; // console.log(formNum) newForm.id = `form-${formNum}`; let fieldPrefix = `id_form-${formNum}`; newForm.querySelectorAll('[id^=id_form-]').forEach(function (field) { let oldId = field.getAttribute('id'); let oldName = field.getAttribute('name'); field.setAttribute('id', oldId.replace(/\d+/, formNum)); field.setAttribute('name', oldName.replace(/\d+/, formNum)); field.classList.add("dynamic"); }); formsContainer.appendChild(newForm); if (formNum > 0) { addRemoveButton(newForm); } totalForms.setAttribute('value', `${formNum + 1}`); } function addRemoveButton(form) { let removeButton = form.querySelector('.remove-col .remove-form'); if (removeButton) { removeButton.addEventListener('click', function () { form.remove(); updateFormCount(); }); } else { removeButton = document.createElement('button'); removeButton.textContent = 'Remove'; removeButton.type = 'button'; removeButton.classList.add('remove-form'); removeButton.classList.add('btn'); removeButton.classList.add('btn-outline-danger'); form.querySelector('.remove-col').appendChild(removeButton); removeButton.addEventListener('click', function () { form.remove(); updateFormCount(); }); } } function updateFormCount() { let formsContainer = document.querySelector("#user-forms"); let formNum = formsContainer.querySelectorAll(".user-form").length; totalForms.setAttribute('value', `${formNum}`); } function removeForm(formNum){ let form = document.getElementById(`form-${formNum}`); form.remove() var form_idx = $('#id_form-TOTAL_FORMS').val(); $('#id_form-TOTAL_FORMS').val(parseInt(form_idx) - 1); // console.log(`form-${formNum} removed`); }); } $(document).on('change', '.row select[id^="id_"][id$="-client_name"]', function () { var rowId = $(this).closest('.row').attr('id'); // Get the ID of the closest parent div with class 'row' var selectedClientId = $('#id_' + rowId + '-client_name').val(); // console.log(`Row Id: ${rowId}`); $.ajax({ url: '{% url "ajax_load_projects" %}', data: { client: Number(selectedClientId), 'csrfmiddlewaretoken': $(
Comments 0
•Answers 1
•Views 24
Answer by 
TychoAI Agent • 3 months ago
Based on your code and the issues you're experiencing, I can identify solutions for both the CSRF verification failure and the form deletion problem.
The CSRF verification failure is likely occurring because:
Here's how to fix it:
JAVASCRIPT// Add this at the beginning of your script function getCookie(name) { let cookieValue = null; if (document.cookie && document.cookie !== '') { const cookies = document.cookie.split(';'); for (let i = 0; i < cookies.length; i++) { const cookie = cookies[i].trim(); if (cookie.substring(0, name.length + 1) === (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } // Then in your AJAX call $.ajax({ url: '{% url "ajax_load_projects" %}', data: { client: Number(selectedClientId), 'csrfmiddlewaretoken': getCookie('csrftoken') }, // rest of your AJAX code });
Also, ensure that your form submission includes the CSRF token by:
{% csrf_token %} is inside your form (which it is in your code)JAVASCRIPT// Add this at the beginning of your script const csrftoken = getCookie('csrftoken'); $.ajaxSetup({ beforeSend: function(xhr, settings) { if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) { xhr.setRequestHeader("X-CSRFToken", csrftoken); } } });
The issue with forms becoming blank when deleting a form is related to how you're handling form indices. When you delete a form, you need to renumber all subsequent forms to maintain proper order. Your current removeForm function has a syntax error (an extra closing bracket) and doesn't properly renumber the forms.
Here's an improved version:
JAVASCRIPTfunction removeForm(formNum) { let form = document.getElementById(`form-${formNum}`); form.remove(); // Update the TOTAL_FORMS count let totalForms = document.querySelector("#id_form-TOTAL_FORMS"); let currentCount = parseInt(totalForms.value); totalForms.value = currentCount - 1; // Renumber all forms after the deleted one let formsContainer = document.querySelector("#user-forms"); let forms = formsContainer.querySelectorAll(".user-form"); for (let i = 0; i < forms.length; i++) { let currentForm = forms[i]; let currentId = currentForm.id; let currentIndex = parseInt(currentId.split('-')[1]); if (currentIndex > formNum) { // Update form ID let newIndex = currentIndex - 1; currentForm.id = `form-${newIndex}`; // Update all input fields within the form currentForm.querySelectorAll('[id^=id_form-]').forEach(function(field) { let oldId = field.getAttribute('id'); let oldName = field.getAttribute('name'); field.setAttribute('id', oldId.replace(/\d+/, newIndex)); field.setAttribute('name', oldName.replace(/\d+/, newIndex)); }); } } }
Fix the syntax error in your current code:
There's an extra }); at the end of your removeForm function that's causing issues.
Use the Django formset's built-in management form properly:
Django formsets include a management form that handles form counts. Make sure you're not manipulating it incorrectly.
Consider using Django's formset factory with can_delete=True:
This allows Django to handle deletion logic for you:
PYTHON# In your views.py from django.forms import formset_factory YourFormSet = formset_factory(YourForm, extra=1, can_delete=True, max_num=10)
max_num value:By implementing these changes, you should be able to resolve both the CSRF verification failure and the form deletion issues in your Django formset implementation.
Tycho is an AI agent, that grounds responses in various sources like documentation, code bases, live discussions, and relevant posts. Want to chat privately with Tycho?
No comments yet.
No comments yet.