JavaScript Beispiele Teil 2 zur Lösung von Anforderungen mit den Frontend Webassets
Hinweis: Diese Features sind Teil der Visforms Subscription und in der freien Visforms Version nicht enthalten.
Der Quersumme eines Zahlen-Feldes berechnen und anzeigen
Themen
Die folgenden Themen sind im Beispiel enthalten:
- Code erst dann ablaufen lassen, nachdem das Formular seitens Visforms initialisiert wurde.
- Auf Änderungen durch den Benutzer reagieren.
- Ermitteln der numerischen Werte von Zahl-Feldern.
- Betroffene Felder anhand ihrer Feld-ID ansprechen.
- Text-Ausgabe in ein Text-Feld.
Beschreibung
Ein Formular hat unter anderem ein Zahlen-Feld und ein Text-Feld. Das Text-Feld ist mit der Einstellung Read-Only versehen. Vom Wert des Zahlen-Feldes soll bei Änderung durch den Benutzer die Quer-Summe neu berechnet und im Formular in diesem Text-Feld angezeigt werden.
Das Formular
Die Formular-Konfiguration
Der JavaScript-Code wird in der Formular-Konfiguration, Reiter Frontend Webassets auf dem Unter-Reiter Formular in das Options-Feld JavaScript eingetragen:
- Formular-Konfiguration » Reiter: Frontend Webassets » Unter-Reiter Formular
Parameter: JavaScript = Der JavaScript-Code.
Der JavaScript-Code
// calculate digit-sum
// console.log('FEWA script loaded');
document.addEventListener('visformsInitialised', function() {
// console.log('FEWA visformsInitialised');
// use the field IDs to connect to form fields
const fieldIDNumber = 60;
const fieldIDText = 61;
const updateWhileTyping = true;
const eventName = updateWhileTyping ? 'input' : 'change';
document.getElementById(`field${fieldIDNumber}`).addEventListener(eventName, function(event) {
event.stopPropagation();
document.getElementById(`field${fieldIDText}`).value = crossSum(this.value);
});
});
function crossSum(number) {
// calculate the cross sum
let sum = 0;
let rest = number;
while (rest > 0) {
let next = rest % 10;
sum = sum + next;
rest = (rest - next) / 10;
}
return sum;
}
Die Events ‘input’ und ‘change’
Im Code steht die folgende Zeile:
const updateWhileTyping = true;
Die boolesche Konstante entscheidet anschließend im Code zwischen der Nutzung der beiden Events input und change:
- Event input wird gefeuert, sobald während der Eingabe-Fokus auf dem Input-Element liegt eine Taste gedrückt wird.
Bei jeder Eingabe einer Ziffer wird das Feld mit der Quersumme aktualisiert. - Event change wird gefeuert, sobald das Input-Element den Eingabe-Fokus verliert.
Erst beim Verlassen des Feldes wird das Feld mit der Quersumme abschließend aktualisiert.
Bedingte Felder mit logischem UND
Themen
Die folgenden Themen sind im Beispiel enthalten:
- Code erst dann ablaufen lassen, nachdem das Formular seitens Visforms initialisiert wurde.
- Auf Änderungen durch den Benutzer reagieren.
- Betroffene Felder anhand ihrer Feld-ID ansprechen.
- Radio Felder anhand ihres Namens ansprechen.
- Steuerung der Anzeige von Feldern.
Beschreibung
Die Möglichkeit, bedingte Felder mit einem logischen UND zu verknüpfen, gibt es in Visforms nicht als eine einfache Konfiguration. Grundsätzlich lässt sich diese Anforderung mit etwas individuellem JavaScript-Code gut umsetzen.
Es sind beliebig andere Szenarien, auch deutlich komplexere logische Bedingungen, auf gleiche Weise umsetzbar.
Im Folgenden ein Beispiel für ein logisches UND zwischen einer Check-Box und einem Radio-Button:
- Textfeld 'text-1' ist als bedingtes Feld von 'radio-1' für die Options-Werte label1 und label2 konfiguriert.
- Textfeld 'text-2' ist als bedingtes Feld von 'checkbox-1' konfiguriert.
- Textfeld 'text-3' wird allein durch den JavaScript-Code gesteuert.
- Textfeld 'text-3' wird nur angezeigt, wenn Radio-Feld und Checkbox-Feld die “richtigen” Einstellungen haben.
Hinweis: Ist Textfeld 'text-3' versteckt, werden auch keine Daten für das Feld beim Absenden des Formulars übertragen.
Formular mit keiner Auswahl
Formular mit erster Auswahl
Formular mit zweiter Auswahl
Formular mit dritter Auswahl
Formular-Konfiguration
Der JavaScript-Code wird in der Formular-Konfiguration, Reiter “Frontend Webassets” eingefügt. Da es sich um die Formular-Anzeige handelt, müssen Sie dort den Reiter “Formular” verwenden. Tragen Sie dort den JavaScript-Code im Feld “JavaScript” ein.
Der JavaScript-Code
const idForm = 9;
const radioName = 'radio';
const radioValue = 'value2';
const idCheckbox = 66;
const idText3 = 68;
// console.log('FEWA script loaded');
document.addEventListener('visformsInitialised', function() {
// console.log('FEWA visformsInitialised');
handleChanged();
document.querySelectorAll(`input[type=radio][name="form${idForm}${radioName}"], #field${idCheckbox}`).forEach(
function() {
this.addEventListener('change', function() {
handleChanged();
});
}
);
});
function handleChanged() {
let checkbox = document.getElementById(`field${idCheckbox}`).checked;
// notice the '?' sign: if you aren't sure the element exists, use optional chaining
let radio = document.querySelector(`input[name="form${idForm}${radioName}"]:checked`)?.value;
if(checkbox && radio === radioValue) {
// show
document.querySelector(`.field${idText3}`).style.display = '';
document.querySelector(`#field${idText3}`).classList.remove('ignore');
document.querySelector(`#field${idText3}`).disabled = false;
}
else {
// hide
document.querySelector(`.field${idText3}`).style.display = 'none';
document.querySelector(`#field${idText3}`).classList.add('ignore');
document.querySelector(`#field${idText3}`).disabled = true;
}
}
Zeit für Text-Feld auswählen
Themen
Die folgenden Themen sind im Beispiel enthalten:
- Code erst dann ablaufen lassen, nachdem das Formular seitens Visforms initialisiert wurde.
- Einbinden einer Drittanbieter-JavaScript-Bibliothek.
- Formular-Felder anhand ihrer Feld-IDs an eine JavaScript-Bibliothek binden.
- An eine JavaScript-Bibliothek gebundene Formular-Felder mit der JavaScript-Bibliothek initialisieren.
- Für ein gebundenes Formular-Feld ein Zeit-Fenster für die mögliche Auswahl umsetzen.
Beschreibung
Es gibt in Visforms kein spezielles Feld vom Typ “Zeit”. Ein solches spezielles Feld vom Typ “Zeit” wäre mit vielen denkbaren Optionen zur Einstellung und genaueren Eingrenzung der auswählbaren Zeiten versehen. Es wäre zusätzlich mit verschieden Einstellungen zum Zeit-Format und ähnliche Themen versehen.
Mit wenig Aufwand und einem kurzen übersichtlichen Code kann das gleiche auch direkt mit JavaScript-Code erreicht werden:
- Als Eingabe-Feld wird ein einfaches Formular-Feld vom Typ “Text” verwendet.
- Der Benutzer erhält eine Liste der möglichen Zeiten zur Auswahl.
- Alle Einstellungen bezüglich der auswählbaren Zeit oder dem Zeit-Format, erfolgen einfach und direkt im JavaScript Code.
Hinweis: Die verwendete Drittanbieter-JavaScript-Bibliothek kann für mobile Plattformen mit kleinem Bildschirm platzsparend konfiguriert werden.
Formular mit Zeit-Feldern
Feld time-1 mit Format “24 Stunden”
Feld time-2 mit Format “12 Stunden”
Die CSS-Regel
Für das Bootstrap 5 basierte Joomla-Template Cassiopeia ist folgende kleine CSS-Regel notwendig.
/* Fix timepicker-ui clear button alignment layout conflict with Bootstrap 5 */
.tp-ui-wrapper, .tp-ui-wrapper.mobile {
width: auto !important;
}
Der JavaScript-Code
Entsprechend den gesetzen Werten im JavaScript-Code, wird die Auswahl möglicher Uhrzeiten angezeigt:
- mit der jeweilig voreingestellten Zeiten clock:disabledTime,
- im jeweiligen Zeit-Format clock:type,
- außerhalb der deaktivierten Zeiten clock:currentTime:time,
// console.log('FEWA script loaded');
document.addEventListener('visformsInitialised', function() {
// console.log('FEWA visformsInitialised');
initializeTimerUI24();
initializeTimerUI12();
});
function initializeTimerUI24() {
const fieldID1 = 79;
const input = document.getElementById(`field${fieldID1}`);
const options = {
clock: {
type: '24h',
disabledTime: {
interval: ['00:00 - 7:00', '12:00 - 13:00', '19:00 - 23:00']
},
currentTime: {
time: new Date().setHours(8, 0, 0),
}
},
ui: {
theme: 'blueprint',
clearButton: true,
mobile: false
},
labels: {
ok: 'Übernehmen', cancel: 'Abbrechen', clear:'Löschen', time: 'Zeit Wählen',
mobileTime: 'Zeit eingeben', mobileHour: 'Stunde', mobileMinute: 'Minute'
},
callbacks: {
onConfirm: (data) => console.log('selected: ', data),
},
};
const picker = new TimepickerUI(input, options);
picker.create();
}
function initializeTimerUI12() {
const fieldID1 = 80;
const input = document.getElementById(`field${fieldID1}`);
const options = {
clock: {
type: '12h',
disabledTime: {
interval: "10:30 AM - 3:00 PM"
},
currentTime: {
time: new Date().setHours(10, 0, 0),
}
},
ui: {
theme: 'blueprint',
clearButton: true,
mobile: false
},
labels: {
ok: 'Übernehmen', cancel: 'Abbrechen', clear:'Löschen', time: 'Zeit Wählen',
mobileTime: 'Zeit eingeben', mobileHour: 'Stunde', mobileMinute: 'Minute'
},
callbacks: {
onConfirm: (data) => console.log('selected: ', data),
},
};
const picker = new TimepickerUI(input, options);
picker.create();
}
Die verwendete JavaScript-Bibliothek
JavaScript-Bibliothek
Das Beispiel verwendet die verbreitete Bibliothek timepicker-ui ein:
Einbindung mit direktem Laden via PHP
In Joomla 6 erfolgt die Steuerung von Stylesheets und Scripts ausnahmslos über den Web-Asset-Manager.
Joomla 6 verlangt für eigene Erweiterungen oder Templates eine deklarative Registrierung.
Dadurch weiß das CMS genau, in welcher Reihenfolge Dateien geladen werden müssen.
Es gibt mehrere Methoden den Web-Asset-Manager zu nutzen.
Im Folgenden eine einfache Methode mit direktem Laden via PHP ohne JSON-Datei.
Entgegen anderen Methoden wird hierbei die zentrale Datei joomla.asset.json nicht verwendet.
Die Datei joomla.asset.json
- liegt im Hauptverzeichnis deines Templates oder im media-Ordner deiner Extension,
- dient zu zur deklarativen Registrierung von Stylesheets und Scripts.
Die 3 Teile der Bibliothek wurden manuell in das Joomla-Verzeichnis media/vendor/timepicker-ui/ heruntergeladen.
$wa = $this->getDocument()->getWebAssetManager();
// from https://cdn.jsdelivr.net/npm/timepicker-ui@4.4.0/dist/css/main.css
// from https://cdn.jsdelivr.net/npm/timepicker-ui@4.4.0/dist/css/index.css
// from https://cdn.jsdelivr.net/npm/timepicker-ui@4.4.0/dist/index.umd.js
$wa->registerAndUseStyle('main.min.css', 'media/vendor/timepicker-ui/main.min.css');
$wa->registerAndUseStyle('index.min.css', 'media/vendor/timepicker-ui/index.min.css');
$wa->registerAndUseScript('index.umd.js', 'media/vendor/timepicker-ui/index.umd.js', [], ['defer' => true]);
Nutzung eines Visforms Custom-Plugins
Den notwendigen PHP-Code zum direkten Laden der Drittanbieter-JavaScript-Bibliothek kann zum Beispiel über ein Visforms Custom-Plugin erfolgen.
Das Plugin muss über den Joomla Plugin-Manager aktiviert werden, damit es verwendet wird.
Im Folgenden der PHP-Code im Visforms Custom-Plugin um vor der An zeige des Formulars die JavaScript-Bibliothek zu laden.
Hinweis: Die JavaScript-Bibliothek wird durch den folgenden PHP-Code nur geladen im Falle der Formularanzeige durch einen Menü-Eintrag und ausschließlich für das Formular mit dem Namen time-field-native. Alternativ kann in der if-Abfrage auch mit der ID des Formulars gearbeitet werden.
public function onVisformsFormPrepare(VisformsFormPrepareEvent $event): void {
// context = 'com_visforms.form'
// context = 'mod_visforms.form'
// context = 'plg_vfformview.form'
// the event is form-based and is fired once for the form
// triggered almost immediately before the layout file (component/module/plugin) is loaded
$context = $event->getContext();
$form = $event->getForm();
if($context === 'com_visforms.form' && $form->name === 'time-field-native') {
$wa = Factory::getApplication()->getDocument()->getWebAssetManager();
$wa->registerAndUseStyle('main.min.css', 'media/vendor/timepicker-ui/main.min.css');
$wa->registerAndUseStyle('index.min.css', 'media/vendor/timepicker-ui/index.min.css');
$wa->registerAndUseScript('index.umd.js', 'media/vendor/timepicker-ui/index.umd.js', [], ['defer' => true]);
}
}
Folgende Anpassungen an Ihre Situation sind notwendig:
- $form->name === ‘time-field-native' Der Visforms Formular-Name aus der Formular-Konfiguration.
Zeit für Text-Feld mit Offset auswählen
Themen
Die folgenden Themen sind im Beispiel enthalten:
- Code erst dann ablaufen lassen, nachdem das Formular seitens Visforms initialisiert wurde.
- Einbinden einer Drittanbieter-JavaScript-Bibliothek.
- Formular-Felder anhand ihrer Feld-IDs an eine JavaScript-Bibliothek binden.
- An eine JavaScript-Bibliothek gebundene Formular-Felder mit der JavaScript-Bibliothek initialisieren.
- Für ein gebundenes Formular-Feld ein Zeit-Fenster für die mögliche Auswahl umsetzen.
- Beachtung eines Zeit-Offsets für den Fall der Auswahl des aktuellen Datums.
Beschreibung
Dies ist eine Erweiterung des vorherigen Beispiels von oben, um eine Zeit für ein Text-Feld auszuwählen.
Zusätzlich zu Auswahl der möglichen Zeiten wird die Auswahl weiter eingeschränkt:
Die erste wählbare Zeit soll für den aktuellen Tag 3 Stunden in der Zukunft liegen.
Die Auswahl des Datums wird in die Lösung mit einbezogen:
- Das Formular startet mit einem deaktivierten Zeit-Feld.
- Erst nachdem ein Datum gewählt wurde, steht das Zeit-Feld zur Eingabe bereit.
- Wird das Datum neu gewählt, kommt es zum Zurücksetzen der im Zeit-Feld gemachten Eingabe.
Der aktuelle Tag muss speziell behandelt werden, da hier der zeitliche Vorlauf von OFFSET_HOURS Stunden zusätzlich angewendet werden muss. An allen anderen Tagen ist die Auswahl der Zeitbegrenzung allein durch die Konfiguration von Start-Zeit BUSINESS_OPEN und End-Zeit BUSINESS_CLOSE festgelegt.
Feld time-3 mit 3 Stunden Offset
Die Zeitauswahl für dieses Beispiel wurde um 10:32 Uhr durchgeführt.
Die erste mögliche auswählbare Zeit für den gleichen Tag ist daher um 13:35 Uhr.
Für alle anderen Tage ist der komplette Zeitraum der täglichen Geschäftsöffnung auswählbar.
Start des Formulars
Heute als Datum ausgewählt
Die erste mögliche auswählbare Zeit für den gleichen Tag ist um 13:35 Uhr.
Morgen als Datum ausgewählt
Für alle anderen Tage ist der komplette Zeitraum der täglichen Geschäftsöffnung auswählbar.
Die CSS-Regel
Für das Bootstrap 5 basierte Joomla-Template Cassiopeia ist folgende kleine CSS-Regel notwendig.
/* Fix timepicker-ui clear button alignment layout conflict with Bootstrap 5 */
.tp-ui-wrapper, .tp-ui-wrapper.mobile {
width: auto !important;
}
Der JavaScript-Code
Entsprechend den gesetzen Werten im JavaScript-Code, werden gefilterte Uhrzeiten zur Auswahl angezeigt.
// console.log('FEWA script loaded');
const dateID = 92; // Visforms date field ID of field list
const textID = 95; // Visforms time edit field ID of field list
const OFFSET_HOURS = 3;
const BUSINESS_OPEN = '08:00';
const BUSINESS_CLOSE = '21:00';
let picker;
let options;
document.addEventListener('visformsInitialised', function() {
// console.log('FEWA visformsInitialised');
document.getElementById(`field${textID}`).disabled = true;
document.getElementById(`field${dateID}`).addEventListener('change', function(event) {
event.stopPropagation();
document.getElementById(`field${textID}`).value = '';
document.getElementById(`field${textID}`).disabled = false;
initializeTimerUI();
});
});
function initializeTimerUI() {
if(picker !== undefined) {
picker.destroy();
}
const input = document.getElementById(`field${textID}`);
options = {
clock: {
type: '24h',
disabledTime: {
interval: getInterval(BUSINESS_OPEN, BUSINESS_CLOSE),
}
},
ui: {
theme: 'blueprint',
clearButton: true,
mobile: false
},
labels: {
ok: 'Übernehmen', cancel: 'Abbrechen', clear:'Löschen', time: 'Zeit Wählen',
mobileTime: 'Zeit eingeben', mobileHour: 'Stunde', mobileMinute: 'Minute'
},
callbacks: {
onConfirm: (data) => {
const selectedTime = `${data.hour}:${data.minutes}`;
const intervalSetting = options.clock.disabledTime.interval;
// Run the manual check against your configuration
if (isTimeDisabled(selectedTime, intervalSetting)) {
alert("Diese Zeit ist nicht möglich - wählen Sie eine andere Zeit.");
input.value = ""; // Clear out the invalid data
// Optional: force the UI back open to pick a proper slot
setTimeout(() => picker.open(), 500);
} else {
console.log("Success! Time accepted:", selectedTime);
}
}
},
};
picker = new TimepickerUI(input, options);
picker.create();
}
function getInterval(bizOpenStr, bizCloseStr) {
const selected = document.getElementById(`field${dateID}`).value;
const d = new Date();
const today = String(d.getDate()).padStart(2, '0') + '.' + String(d.getMonth() + 1).padStart(2, '0') + '.' + String(d.getFullYear());
if(today === selected) {
// today: handle the time offset
console.log('handle the time offset');
return getDynamicDisabledInterval(bizOpenStr, bizCloseStr);
}
else {
// not today: regular opening hours
console.log('regular opening hours');
return [`00:00 - ${bizOpenStr}`, `${bizCloseStr} - 23:59`];
}
}
function getDynamicDisabledInterval(bizOpenStr, bizCloseStr) {
// Generates the precise interval string to pass to timepicker-ui
const now = new Date();
// 1. Calculate the rolling 2-hour delay threshold
const delayTime = new Date(now.getTime() + OFFSET_HOURS * 60 * 60 * 1000);
const delayHH = String(delayTime.getHours()).padStart(2, '0');
const delayMM = String(delayTime.getMinutes()).padStart(2, '0');
const delayStr = `${delayHH}:${delayMM}`;
// 2. Determine when the doors "effectively" open today (the later of business open vs delay)
const effectiveOpenStr = delayStr > bizOpenStr ? delayStr : bizOpenStr;
// Edge Case: If the 2-hour delay pushes past closing time, block the entire day
if (effectiveOpenStr >= bizCloseStr) {
return ['00:00 - 23:59'];
}
// 3. Build intervals to blacklist (block before open, and block after close)
// This explicitly leaves ONLY the window between effectiveOpenStr and bizCloseStr selectable.
return [`00:00 - ${effectiveOpenStr}`, `${bizCloseStr} - 23:59`];
}
/**
* Validates whether a given time string (e.g., "12:00") falls into the disabled intervals.
* @param {string} timeString - The time to check ("HH:MM")
* @param {string|string[]} intervals - The disabled interval(s) from options
* @returns {boolean} - true if the time is disabled/forbidden, false if it is allowed
*/
function isTimeDisabled(timeString, intervals) {
// Convert "HH:MM" into total minutes from midnight for direct numerical comparison
const toMinutes = (t) => {
const [h, m] = t.trim().split(":").map(Number);
return h * 60 + m;
};
const target = toMinutes(timeString);
// Ensure we are working with an array even if a single string interval was passed
const intervalArray = Array.isArray(intervals) ? intervals : [intervals];
// Check if the target minutes fall within ANY of the disabled time blocks
return intervalArray.some(interval => {
if (!interval) return false;
const [start, end] = interval.split("-");
return target >= toMinutes(start) && target <= toMinutes(end);
});
}
Folgende Anpassungen an Ihre Situation sind notwendig:
- const dateID = 92 Die Visforms Datums-Feld-ID aus der Feldliste.
- const textID = 95 Die Visforms Text-Feld-ID aus der Feldliste.
- const OFFSET_HOURS = 3 Der Offset in Stunden.
- const BUSINESS_OPEN = ‘08:00' Die früheste auswählbare Tages-Zeit.
- const BUSINESS_CLOSE = ‘21:00' Die späteste auswählbare Tages-Zeit.
- alert(“Diese Zeit ist nicht möglich - wählen Sie eine andere Zeit.");
Der Hinweis-Text falls wie auch immer eine unerlaubte Zeit gewählt wurde.
Inhärente Eigenart im Design der Bibliothek
Es existiert eine inhärente Eigenart im Design der ansonsten sehr guten Bibliothek.
Wenn das zugehörige Text-Input-Feld bei der Initialisierung des Dialogs völlig leer ist, greift timepicker-ui automatisch auf einen internen Standardwert von 12:00 Uhr zurück, um die Zeiger der analogen Uhr darzustellen.
Dies geschieht noch vor der Auswertung Ihrer disabledTime-Intervalle, wodurch eine Lücke entsteht:
Ein Benutzer kann sofort auf OK klicken und so die eigentlich gesperrte Standardzeit übermitteln.
Um diese Lücke zu schließen, müssen Sie eine zusätzliche Validierung (Fallback-Validierung) implementieren, die das Absenden verhindert.
Um sicherzustellen, dass ein Benutzer Ihre Validierung niemals umgehen kann – selbst wenn er irgendwie eine unzulässige Uhrzeit erreicht oder eingibt –, können Sie die integrierte Callback-Funktion nutzen.
Indem Sie auf die Phase onConfirm() reagieren, können Sie die Auswahl manuell anhand Ihrer Regeln überprüfen; dies geschieht mithilfe der Funktion isTimeDisabled(timeString, intervals).
Fällt die Auswahl in einen gesperrten Zeitbereich, können Sie eine Warnung ausgeben, das Eingabefeld leeren oder die Zeitauswahl erneut öffnen und so wirksam verhindern, dass die ungültigen Daten verarbeitet werden.
Die Hilfsfunktion für die benutzerdefinierte Validierung liest den Wert für interval direkt aus Ihrer Konfiguration aus und gibt true oder false zurück, je nachdem, ob eine bestimmte Uhrzeit gesperrt ist.
Hinweis: Diese zusätzliche Validierung schützt auch in Situationen, in denen der Benutzer den Dialog zur Zeitauswahl einen langen Zeitraum geöffnet hat, ohne eine Auswahl zu treffen.
Die verwendete JavaScript-Bibliothek
JavaScript-Bibliothek
Das Beispiel verwendet die verbreitete Bibliothek timepicker-ui ein:
Einbindung mit direktem Laden via PHP
Die Einbindung der Bibliothek timepicker-ui wird im vorherigen Beispiel beschrieben.
Fortschrittsanzeige bei mehrseitigen Formularen mit eigenen Texten
Themen
Die folgenden Themen sind im Beispiel enthalten:
- Code erst dann ablaufen lassen, nachdem das HTML Dokument initialisiert wurde.
- HTML-Elemente des Formulars ermitteln.
- HTML-Elemente des Formulars mit neuem Text versehen.
Beschreibung
Die Fortschritt-Anzeige des Formulars soll mit eigenen Texten versehen werden. Visforms hat für die Fortschrittsanzeige bei mehrseitigen Formularen 2 Möglichkeiten der Darstellung. Die Texte der Darstellung werden in beiden Fällen durchnummeriert.
Es ist mit sehr wenig JavaScript-Code möglich, den einzelnen Schritt-Elementen eigene Texte zu geben.
Das Formular
Die Formular-Konfiguration
Der JavaScript-Code
Hinweis: Der Code nutzt die Reihenfolge der einzelnen Seiten in aufsteigender Richtung. Das erste Element hat den Index 0.
// change multi page progress text from simple number to user defined text
// initialize and configure fields
jQuery(document).ready(function() {
// console.log('FEWA script loaded');
jQuery('span.badge').each(function(index, value) {
// console.log(index + ': ' + jQuery(this).text());
switch (index) {
case 0: jQuery(this).text('Peter'); break;
case 1: jQuery(this).text('Paul'); break;
case 2: jQuery(this).text('Mary'); break;
case 3: jQuery(this).text('Myself'); break;
default: jQuery(this).text('Unknown');
}
});
});
Anzahl gewählter Optionen bei Mehrfachselektion
Themen
Die folgenden Themen sind im Beispiel enthalten:
- Code erst dann ablaufen lassen, nachdem das Formular seitens Visforms initialisiert wurde.
- Auf Änderungen durch den Benutzer reagieren.
- Ermitteln der gewählten Optionen einer Mehrfachselektion-Listbox.
- Betroffene Felder anhand ihrer Feld-ID ansprechen.
- Ausgabe in ein Text-Feld des Formulars.
Beschreibung
Ermitteln der Anzahl der gewählten Optionen einer Mehrfachselektion-Listbox. Direkte Ausgabe der Anzahl in ein Text-Feld des Formulars.
Das Formular
Was im folgenden Formular werden sukzessive mehr Optionen ausgewählt.
Die Anzahl der gewählten Optionen wird im Textfeld unmittelbar ausgegeben.
Sie können mit dem Wert aber auch beliebig anders verfahren.
Der JavaScript-Code
// console.log('FEWA script loaded');
document.addEventListener('visformsInitialised', function() {
// console.log('FEWA visformsInitialised');
const selectID = 99;
const textID = 100;
// initialize edit field with '0'
document.getElementById(`field${textID}`).value = '0';
// update on user selection changed
document.getElementById(`field${selectID}`).addEventListener('change', function(event) {
document.getElementById(`field${textID}`).value = document.querySelectorAll(`#field${selectID} :checked`).length;
});
});
Folgende Anpassungen an Ihre Situation sind notwendig:
- const selectID = 99 Die Visforms Feld-ID aus der Feldliste der Mehrfachselektion-Listbox.
- const textID = 100 Die Visforms Feld-ID aus der Feldliste des Textfeldes zur Ausgabe.