Adding and removing DateFields in Django formsets dynamically

Question

Adding and removing DateFields in Django formsets dynamically

I am encountering a unique issue specifically related to the django-bootstrap-datepicker-plus package.

Within my Todo list application, I am aiming to enable tasks to appear on multiple specific dates. I have successfully set up my model, configured my form with formset, and implemented JavaScript for dynamic add/remove functionality.

The challenge I am facing involves the cloning process of my DateField affecting the DatePicker divs, as illustrated in the code snippet below:

# Revised Model
from django.db import models
from datetime import time

class Task(models.Model):

    id = models.AutoField(primary_key=True)
    title = models.CharField(max_length=50, default="")
    description = models.CharField(max_length=500, default="")
    entry_date = models.DateTimeField(auto_now_add=True)
    last_updated = models.DateTimeField(auto_now=True)
    specific_dates = models.ManyToManyField('SpecificDate', blank=True)
    due_until = models.TimeField(auto_now_add=False, default=time(12, 0))

class SpecificDate(models.Model):
    todo = models.ForeignKey(Task, on_delete=models.CASCADE)
    date = models.DateField(auto_now_add=False, blank=True, null=True)

    class Meta:
        unique_together = ('todo', 'date')

/* Partial Code Block: To avoid redundancy, omitted the forms.py and task_form.html snippets */ /* JavaScript Section - Modified for clarity */

Upon clicking the 'add' button, the resulting HTML structure within the formset is displayed as shown below:

<!-- Updated Formset Structure Post-Add Action -->
<div id="formset-container">
    <input type="hidden" name="specificdate_set-TOTAL_FORMS" value="2" id="id_specificdate_set-TOTAL_FORMS">
    <input type="hidden" name="specificdate_set-INITIAL_FORMS" value="0" id="id_specificdate_set-INITIAL_FORMS">
    <input type="hidden" name="specificdate_set-MIN_NUM_FORMS" value="0" id="id_specificdate_set-MIN_NUM_FORMS">
    <input type="hidden" name="specificdate_set-MAX_NUM_FORMS" value="1000" id="id_specificdate_set-MAX_NUM_FORMS">

    <!-- Sample Date Input From Cloned Form -->
    <div id="formset-date" class="formset-date d-flex align-items-center">
        <div class="flex-grow-1 mr-2">
            <label for="id_specificdate_set-0-date" class=""> Date </label>
            
            /* Additional Structure Details Omitted for Brevity */
            
            <input type="text" class="datepickerinput form-control" id="id_specificdate_set-0-date" data-dbdp-config="{...}" data-dbdp-debug="" data-name="specificdate_set-0-date">
            <input type="hidden" name="null" value="">
        
        </div>
          
        /* Buttons for Add/Remove Actions Within Cloned Form Set */
       
      </div>
      
    </div>

    /* Subsequent Cloned Form Snippet For Illustration */
    
</div>

Observing closely, it appears that despite updating the dataset.name property during processing, the rendered HTML does not reflect these changes. The primary query remains: How can the correct dataset.names be maintained in the respective <input> fields to ensure accurate field elements on form submission?

javascript django formset django-bootstrap4

Answer 1

Answer №1

After some trial and error, I finally managed to solve my problem with a functional JavaScript code. This code even handles the task of disabling all add/remove buttons except for the last one. It may not be the most elegant solution, but it gets the job done.

document.addEventListener('DOMContentLoaded', function() {
    const formsetContainer = document.getElementById('formset-container');
    const formsetPrefix = 'specificdate_set';
    const totalFormsElement = document.getElementById('id_' + formsetPrefix + '-TOTAL_FORMS');

    function updateLabels() {
        $('.formset-date').each(function(index) {
            $(this).find('label').text(`Date ${index + 1}`);
        });
    }

    function manageAddRemoveButtons() {
        let formsetDivs = formsetContainer.querySelectorAll('.formset-date');
        formsetDivs.forEach((div, index) => {
            // disable add button for all but the last row
            div.querySelector('.add-date').disabled = (
                index !== formsetDivs.length - 1);
            // disable remove button for all but the last
            // row, but not if only one row is present
            div.querySelector('.remove-date').disabled = (
                formsetDivs.length === 1) || (
                    index !== formsetDivs.length - 1);
        });
    }

    function adjustNamesAndIds(newForm, newIndex) {
        const regex = /^(.+)-\d+-(.+)$/;

        newForm.querySelectorAll('[id], label, .datepickerinput').forEach(element => {
            if (element.tagName === 'BUTTON') return; // Skip buttons entirely

            ['id', 'htmlFor', 'name'].forEach(attribute => {
                if (element[attribute]) {
                    const match = element[attribute].match(regex);
                    if (match) {
                        element[attribute] = `${match[1]}-${newIndex}-${match[2]}`;
                    }
                }
            });

            if (element.classList.contains('datepickerinput')) {
                const $datepickerInput = $(element);
                if ($datepickerInput.length && $datepickerInput.data('name')) {
                    const nameMatch = $datepickerInput.data('name').match(regex);
                    if (nameMatch) {
                        $datepickerInput.attr('name', `${nameMatch[1]}-${newIndex}-${nameMatch[2]}`);
                    }
                }
            }
        });
    }

    function cloneForm() {
        let totalForms = parseInt(totalFormsElement.value, 10);
        let newFormIndex = totalForms;
        totalFormsElement.value = totalForms + 1;

        let newForm = formsetContainer.querySelector('.formset-date:last-of-type').cloneNode(true);
        if (newForm && typeof newFormIndex !== 'undefined') {
            adjustNamesAndIds(newForm, newFormIndex);
            formsetContainer.appendChild(newForm);
            // Remove Extra Hidden Fields
            let inputName = `${formsetPrefix}-${totalForms-1}-date`;
            newForm.querySelectorAll(`input[type="hidden"][name="${inputName}"]`).forEach(
                hiddenInput => hiddenInput.remove()
            ); 
        } else {
            console.error('Error cloning form: newForm or newFormIndex is invalid.');
        }
    }

    formsetContainer.addEventListener('click', function(event) {
        if (event.target.classList.contains('add-date')) {
            event.preventDefault();
            cloneForm();
        } else if (event.target.classList.contains('remove-date')) {
            event.preventDefault();
            let formToRemove = event.target.closest('.formset-date');
            formToRemove.remove();
        }
        updateLabels();
        manageAddRemoveButtons();
    });

    updateLabels(); 
    manageAddRemoveButtons();
});

Answer 2

After some trial and error, I finally managed to solve my problem with a functional JavaScript code. This code even handles the task of disabling all add/remove buttons except for the last one. It may not be the most elegant solution, but it gets the job done.

document.addEventListener('DOMContentLoaded', function() {
    const formsetContainer = document.getElementById('formset-container');
    const formsetPrefix = 'specificdate_set';
    const totalFormsElement = document.getElementById('id_' + formsetPrefix + '-TOTAL_FORMS');

    function updateLabels() {
        $('.formset-date').each(function(index) {
            $(this).find('label').text(`Date ${index + 1}`);
        });
    }

    function manageAddRemoveButtons() {
        let formsetDivs = formsetContainer.querySelectorAll('.formset-date');
        formsetDivs.forEach((div, index) => {
            // disable add button for all but the last row
            div.querySelector('.add-date').disabled = (
                index !== formsetDivs.length - 1);
            // disable remove button for all but the last
            // row, but not if only one row is present
            div.querySelector('.remove-date').disabled = (
                formsetDivs.length === 1) || (
                    index !== formsetDivs.length - 1);
        });
    }

    function adjustNamesAndIds(newForm, newIndex) {
        const regex = /^(.+)-\d+-(.+)$/;

        newForm.querySelectorAll('[id], label, .datepickerinput').forEach(element => {
            if (element.tagName === 'BUTTON') return; // Skip buttons entirely

            ['id', 'htmlFor', 'name'].forEach(attribute => {
                if (element[attribute]) {
                    const match = element[attribute].match(regex);
                    if (match) {
                        element[attribute] = `${match[1]}-${newIndex}-${match[2]}`;
                    }
                }
            });

            if (element.classList.contains('datepickerinput')) {
                const $datepickerInput = $(element);
                if ($datepickerInput.length && $datepickerInput.data('name')) {
                    const nameMatch = $datepickerInput.data('name').match(regex);
                    if (nameMatch) {
                        $datepickerInput.attr('name', `${nameMatch[1]}-${newIndex}-${nameMatch[2]}`);
                    }
                }
            }
        });
    }

    function cloneForm() {
        let totalForms = parseInt(totalFormsElement.value, 10);
        let newFormIndex = totalForms;
        totalFormsElement.value = totalForms + 1;

        let newForm = formsetContainer.querySelector('.formset-date:last-of-type').cloneNode(true);
        if (newForm && typeof newFormIndex !== 'undefined') {
            adjustNamesAndIds(newForm, newFormIndex);
            formsetContainer.appendChild(newForm);
            // Remove Extra Hidden Fields
            let inputName = `${formsetPrefix}-${totalForms-1}-date`;
            newForm.querySelectorAll(`input[type="hidden"][name="${inputName}"]`).forEach(
                hiddenInput => hiddenInput.remove()
            ); 
        } else {
            console.error('Error cloning form: newForm or newFormIndex is invalid.');
        }
    }

    formsetContainer.addEventListener('click', function(event) {
        if (event.target.classList.contains('add-date')) {
            event.preventDefault();
            cloneForm();
        } else if (event.target.classList.contains('remove-date')) {
            event.preventDefault();
            let formToRemove = event.target.closest('.formset-date');
            formToRemove.remove();
        }
        updateLabels();
        manageAddRemoveButtons();
    });

    updateLabels(); 
    manageAddRemoveButtons();
});

Adding and removing DateFields in Django formsets dynamically

Answer №1

Similar questions

The execution of the celery task does not occur concurrently

Puppeteer patiently waits for the keyboard.type function to complete typing a lengthy text

Displaying selected checkbox values in a URL with parameters using PHP and JavaScript

AngularJS implemented to trigger a popup alert after a certain duration of time has elapsed since the

When a specific item is selected from a drop-down menu, text boxes and drop-downs will dynamically appear and change

How to access variables with dynamic names in Vue.js

Navigating a loop in javascript: tips and techniques

jQuery offset(coords) behaves inconsistently when called multiple times

The variable was not properly sent to the backing bean

What is the reason behind the lack of access for modal to an external controller?

Unable to import a text file using a semicolon as delimiter in d3

Extension for Chrome

Assurance Code Evaluation

I am facing an issue with updating the state dynamically within a useState object

Error message: The specified file or directory named '-stylus' could not be found

Save data for specific days in MongoDB

Choose a single asset from the list of values stored in the Map

Enable content to be displayed when hovering over it with a mouse in

Is it possible for a search box selection toggle to reveal a hidden information box underneath it containing all the compiled data?

Validation error occurred while attempting to send form data to the Contact Form 7 API through Next.js