Hallo Roland,
danke für den Link zum damaligen Forums-Post.
Ich habe dein sehr umfangreiches und beeindruckendes Formular importiert, durchsucht, darin folgende Situation vorgefunden, stark vereinfacht und den veralteten JavaScript-Code an die neue Visforms-Version angepasst:
birth-date: ID 29
listbox-age: ID 39
jugendlicher: ID 40
erwachsener: ID 41
Die Altersberechnung funktioniert darin nun wie erwartet:
vi-solutions.de/forum-uploads/mitgliedsa...burtsdatum-alter.png
Zitat: Zusammen mit einer Beschreibung zur Reproduktion des Verhaltens, insbesondere welches Formular und wie es aufgerufen wird.
Es wäre für mich erfreulich und wie erwartet deutlich arbeitserleichternd gewesen, die erwähnt verlangte kurze Beschreibung mit Nennung der betroffenen Felder von dir bekommen zu haben.
Als Begleittext im WeTransfer-Austausch ist dafür perfekt geeignet und wird dort in der Regel auch vorgenommen.
Die Ermittlung der betroffenen Felder hat mit Abstand die meiste Zeit in Anspruch genommen.
Folgende Schritte sind an deinem Formular in deiner Joomla-Instanz durchzuführen:
S1 - Konfiguration Feld 'listbox-age' ID = 39:
Feldkonfiguration >> Reiter 'Grundeinstellungen' >> Gruppe 'Anzeige-Einstellungen' >> Read only = Nein
S2 - JavaScript einfügen
An der folgenden Stelle den darauf folgenden JavaScript-Code einfügen.
Formularkonfiguration >> Reiter 'Frontend Webassets' >> Unter-Reiter 'Formular' >> JavaScript
Code:
// console.log('FEWA script loaded');
document.addEventListener('visformsInitialised', () => {
// console.log('visformsInitialised')
const dateFieldID = '29'; // Visforms date field ID of field list
const selectFieldID = '39'; // Visforms select field ID of field list
const dateField = document.getElementById(`field${dateFieldID}`);
const selectFieldContainer = document.querySelector(`div.field${selectFieldID}`);
const selectField = document.getElementById(`field${selectFieldID}`);
const options = selectField.options;
const count = options.length;
selectFieldContainer.classList.add('visinvisible');
dateField.addEventListener('change', (e) => {
let value = e.target.value;
if('' === value) {
for (let i = 0; i < count; i++) {
selectField.options[i].selected = false;
}
selectField.dispatchEvent(new Event('change'));
return;
}
let verify = 18;
let reached = minage(value, null, {minage : verify});
if(reached) {
selectField.value = 1;
}
else {
selectField.value = 0;
}
selectField.dispatchEvent(new Event('change'));
})
});
function minage(value, element, options) {
let check = false, minage = "", age = "", format, i = 0, fmt = {}, valueParts, years, now = new Date();
// a date is selected
if (value) {
// no minage set
if (options.minage) {
minage = options.minage;
} else {
return true;
}
// get year, month and day from selected date in the currently used format
format = (value.indexOf(".") > -1) ? "dd.mm.yyyy" : ((value.indexOf("/") > -1) ? "mm/dd/yyyy" : "yyyy-mm-dd");
format.replace(/(yyyy|dd|mm)/g, function (part) {
fmt[part] = i++;
});
valueParts = value.match(/(\d+)/g);
value = new Date(valueParts[fmt["yyyy"]], valueParts[fmt["mm"]] - 1, valueParts[fmt["dd"]], 0, 0, 0, 0);
// get the difference between the year of now and the selected date
years = now.getFullYear() - value.getFullYear();
// set year in selected date to current year
value.setFullYear(value.getFullYear() + years);
// if the selected date is then in the future, subtract 1 from years, because the last year is not yet completed
if (value > now) {
years--;
}
check = years >= minage;
return check;
}
}
Liebe Grüße, Ingmar