Felder dynamisch im Backend hinzufügen

Holgitsch · 13. April 2023

Hallo liebe Spezis,

ich habe noch ein klitzekleines Problem, an dem ich mir gerade die Zähne ausbeiße. Ich würde gerne im Backend beim Hinzufügen eines Elements ein bis x Elemente hinzufügen können - konkret handelt es sich um Termine. Die Termine können nicht über ein Subform hinzugefügt werden, da sie in einer eigenen Tabelle gespeichert werden sollen müssen. Mein Ansatz nach einiger Recherche war, die neue Kalenderelemente per Javascript zu dupliziern:

Code

let maxDateFields = 10; // maximum number of date fields allowed
let numDateFields = 1; // number of date fields currently displayed


// function to add a new date field
function addDateField() {
    if (numDateFields < maxDateFields) {
        numDateFields++;
    }
    let newDates = document.getElementById('dates').cloneNode(true);
    newDates.id += '_' + (String(numDateFields));
    let elementsWithId = newDates.querySelectorAll('[id]');

    for (let i = 0; i < elementsWithId.length; i++) {
        let oldId = elementsWithId[i].getAttribute('id');
        let newId = oldId + '_' + numDateFields;
        elementsWithId[i].setAttribute('id', newId);
        // Get a reference to the original element
        let originalElement = document.getElementById(oldId);

        // If the original element has event listeners attached, clone them and attach them to the cloned element
        let originalEventListeners = getEventListeners(originalElement);
        if (originalEventListeners) {
            for (let j = 0; j < originalEventListeners.length; j++) {
                let listener = originalEventListeners[j];
                elementsWithId[i].addEventListener(listener.type, listener.listener, listener.useCapture);
            }
        }
    document.getElementById('date-field').appendChild(newDates);
    }
}

// function to remove the last date field
function removeDateField() {
    if (numDateFields > 1) {
        let id = 'dates' + String(numDateFields);
        let lastDates = document.getElementById(id);
        lastDates.remove();
        numDateFields--;
    }
}

Alles anzeigen

Allerdings fehlen mir an den Kalenderelementen dann die Events. Ich habe versucht, die mit zu duplizieren, das hat aber nicht funktioniert. Das zweite Problem, das ich habe ist, dass die duplizierten Elemente nicht im Controller ankommen. Hier finde ich nur die Felder, die ich initial angelegt habe.

Habt Ihr einen Tipp, wie ich das Problem lösen kann? Wenn es einen schlaueren Weg als über Javascript gibt, bin ich auch gerne an einem alternativen Weg interessiert.

Tags