Beispiele zur Lösung von Anforderungen mit den Frontend Webassets
Hinweis: Diese Feature sind Teil der Visforms Subscription und in der freien Visforms Version nicht enthalten.
Summe von vielen Feldern berechnen und anzeigen
Themen
Die folgenden Themen sind im Beispiel enthalten:
- Auf Änderungen durch den Benutzer reagieren.
- Ermitteln der numerischen Werte von Zahl-Feldern und Text-Feldern des Formulars.
- Felder zusammenfassen durch Vergabe einer gemeinsamen “CSS Klasse des Feldes” in der Feld-Konfiguration.
- Eingabe-Felder anhand einer gemeinsamen CSS-Klasse als Gruppe behandeln.
- Ausgabe-Feld anhand einer CSS-Klasse ansprechen.
- Ausgabe in ein Zahl-Feld des Formulars.
- Code erst dann ablaufen lassen, nachdem das Formular komplett initialisiert wurde.
Beschreibung
Das Formular kann sehr viel Zahl-Felder enthalten. Sie wollen über einen Teil der Zahl-Felder oder auch über alle Zahl-Felder eine Gesamt-Summe berechnen und anzeigen lassen. Das Formular reagiert auf jede Änderung durch den Benutzer und berechnet die Gesamt-Summe jeweils neu.
Die Felder werden jeweils über ihre benutzerdefinierte CSS-Klassen angesprochen. Diese CSS-Klasse wird gesetzt in der Feldkonfiguration, Reiter “Erweitert”, Option “CSS Klasse des Feldes”. In diesem Fall bleiben beiden anderen Optionen für “CSS Klasse Control-Gruppe” und “CSS Klasse für Bezeichnung” leer.
Die 6 Summen-Felder
Jedes Feld, das in die Gesamt-Summe einfließen soll, muss in der Feldkonfiguration die gleiche CSS-Klasse gesetzt haben.
Übr die CSS-Klasse css-number-add werden im JavaScript-Code die Summen-Felder angesprochen.
Das Ergebnis-Feld
Auch das Ergebnis-Feld, welches die aktuelle Gesamt-Summe erhält und anzeigt, muss eine Feld-spezifische benutzerdefinierte CSS-Klasse gesetzt haben.
Übr die CSS-Klasse css-number-add-result wird es im JavaScript-Code angesprochen.
Der JavaScript-Code
// calculate sum of field group labeled by common CSS-class 'css-number-add'
jQuery(document).ready(function() {
// console.log('FEWA script loaded');
jQuery('.css-number-add').bind('change keyup mouseup mousewheel', function() {
// re-calculate on value change
calculateSum();
});
jQuery('.visform').bind('visformsInitialised', function() {
// re-calculate on form is initialized
calculateSum();
});
});
function calculateSum() {
let sum = 0;
jQuery('.css-number-add').each(function() {
let val = jQuery(this).val();
// skip all of: is not a number
if(isNaN(val)) return true;
// keep multiplication with 1, otherwise it would be a simple string concatenation
sum += 1 * val;
});
jQuery('.css-number-add-result').val(sum);
}
Die ISO Kalenderwoche für ein Datum berechnen und anzeigen
Themen
Die folgenden Themen sind im Beispiel enthalten:
- Auf Änderungen durch den Benutzer reagieren.
- Ein Datum einlesen und in seine Bestandteile zerlegen.
- Auf das gewählte Datums-Format aus der Feld-Konfiguration reagieren.
- Die Kalenderwoche nach ISO-8601 (Woche startet am Montag) berechnen.
- Den Wert eines Zahl-Feldes setzen.
Beschreibung
Das Formularfeld “birth date” ist das Datumsfeld zur Auswahl eines Datums.
Das Formularfeld “ISO Calendar Week” zeigt automatisch die Kalenderwoche des aktuell ausgewählten Datums gemäß ISO-8601 an (Woche beginnt am Montag).
Anpassung an Ihr Formular
Folgendes muss im JavaScript-Code an Ihr Formular angepasst werden:
- Die Visforms-Feld-ID für das Datumsfeld: const dateFieldID = ‘479’;
- Die Visforms-Feld-ID für das Wochenfeld: const numberFieldID = ‘555’;
Als Feldtyp für das Wochenfeld können Sie Text oder Zahl (wie im Beispiel) verwenden.
Der JavaScript-Code
jQuery(document).ready(function() {
// console.log(' FEWA script loaded');
const dateFieldID = '479'; // Visforms date field ID of field list
const numberFieldID = '555'; // Visforms number field ID of field list
jQuery(`#field${dateFieldID}`).on('change', function() {
let value = jQuery(this).val();
let parts =value.split('.');
const date = new Date(`${parts[2]}-${parts[1]}-${parts[0]}`);
jQuery(`#field${numberFieldID}`).val(getWeekISO8601(date));
});
function getWeekISO8601(dt) {
const tdt = new Date(dt.valueOf());
const dayn = (dt.getDay() + 6) % 7;
tdt.setDate(tdt.getDate() - dayn + 3);
const firstThursday = tdt.valueOf();
tdt.setMonth(0, 1);
if (tdt.getDay() !== 4) {
tdt.setMonth(0, 1 + ((4 - tdt.getDay()) + 7) % 7);
}
return 1 + Math.ceil((firstThursday - tdt) / 604800000);
}
});
Einen Spambot Honeypot einrichten
Themen
Die folgenden Themen sind im Beispiel enthalten:
- Ein Formular-Feld (Typ ‘E-Mail’) verstecken und es nicht anzeigen.
- Prüfen, ob ein Spambot im versteckten Formular-Feld einen Wert gesetzt hat.
- Auf das Abschicken des Formulars reagieren.
- Einen benutzerdefinierten Event-Handler für das Abschicken des Formulars setzen.
- Das Abschicken des Formulars verhindern.
- Eine Meldung an den Benutzer zeigen.
Beschreibung
Visforms unterstützt mehrere effective Möglichkeiten, das Formular gegen Spambots abzusichern. Wenn zusätzliche Maßnahmen ergriffen werden sollen, dann gibt es mehrere einfache Methoden. Hier wird gezeigt, wie mit wenig Aufwand ein Spambot Honeypot eingerichtet werden kann.
Ein Honeypot kann eingerichtet werden, in dem ein weiteres Feld vom Typ “E-Mail” hinzugefügt wird, das:
- für den Benutzer nicht sichtbar ist,
- aber Spambots das unsichtbare Feld schön ausfüllen.
Vor dem Absenden des Formulars wird überprüft, ob das Feld leer ist. Ist das unsichtbare Feld vom Typ “E-Mail” gefüllt, wird das Absenden des Formulars verhindert. Anstelle des Absendens des Formulars wird ein modaler Dialog mit einer durchaus irreführenden Nachricht gezeigt.
Grundsätzlich funktioniert es auch mit einem Feld vom Typ “Versteckt”. Ein Feld vom Typ “Versteckt” ist im Formular automatisch nicht sichtbar. In diesem Fall wäre die eine JavaScript Zeile unnötig, die das Feld versteckt:
jQuery('div.field' + fieldID).css('display', 'none');
Ein unsichtbares Feld vom Typ “E-Mail” ist allerdings für Spammer besser geeignet.
Anpassung an Ihr Formular
Folgende Anpassungen sind am JavaScript-Code sowie Ihrem Formular notwendig:
- Fügen Sie im Formular ein zusätzliches Feld vom Typ “E-Mail” ein, dass sich nicht benötigen.
- Fügen Sie den JavaScript-Code in der Formular-Konfiguration, Reiter “Frontend Webassets”, Reiter “Formular” in das Feld “JavaScript” ein.
- Ändern Sie im JavaScript-Code den Wert der Variablen “formID” auf die ID Ihres Formulars.
- Ändern Sie im JavaScript-Code den Wert der Variablen “fieldID” auf die ID Ihres Feldes.
Der Test-Code
Der JavaScript-Code enthält am Ende einen Test-Code. Der Test-Code spielt “Spammer” und füllt nach 4 Sekunden Wartezeit das unsichtbare E-Mail Feld mit einer E-Mail-Adresse.
Hinweis: Auf der produktiven Seite ist dieser Test-Code auszukommentieren oder ganz zu entfernen.
Der JavaScript-Code
// suppress form submit in case of spambot filled hidden field
jQuery(document).ready(function() {
// console.log('FEWA script loaded');
const formID = '44';
const fieldID = '464';
jQuery('div.field' + fieldID).css('display', 'none');
window['visform' + formID + 'SubmitAction'] = function (form) {
if('' !== jQuery('#field' + fieldID).val()) {
alert("Please log in first!");
return false;
}
return true;
};
// only for testing purposes: emulate spambot attack
window.setTimeout(function () {
jQuery('#field' + fieldID).val('spambot@text.de');
}, 4000);
});
Mit Datums-Feldern und Zeit-Feldern eine Zeitspanne erfassen
Themen
Die folgenden Themen sind im Beispiel enthalten:
- Auf Änderungen durch den Benutzer reagieren.
- Ermitteln der gewählten Werte von Datums-Feldern.
- Ermitteln des individuell konfigurierten Datums-Formates der Datums-Felder.
- Ermitteln der Werte von Text-Feldern des Formulars.
- Prüfen auf Vollständigkeit der Benutzer-Angaben
- Programmieren und Rechnen mit Datums-Werten.
- Programmieren und Rechnen mit Zeit-Werten.
- Parsen eines Datums im Text-Format in ein JavaScript “Date” Objekt.
- Ausgabe in ein Text-Feld des Formulars.
Beschreibung
Im Formular gibt es jeweils ein Datums-Feld und ein Text-Feld zur Eingabe der Einschlaf-Zeit und Aufwach-Zeit. Wenn das letzte Feld gefüllt ist, beginnt die Berechnung der Schlafens-Zeit. In einem weiteren Feld wird die zeitliche Differenz in Stunden angezeigt.
Hinweis: Die Berechnung beachtet die möglichen unterschiedlich Feld-Einstellungen für das Datums-Format. In der Feld-Konfiguration können für Datums-Felder verschiedene Datums-Formate gesetzt sein.
Der JavaScript-Code
jQuery(document).ready(function() {
// console.log('FEWA script loaded');
const startDateID = '556'; // Visforms start date field ID of field list
const startTimeID = '557'; // Visforms start time (text) field ID of field list
const endDateID = '558'; // Visforms end date field ID of field list
const endTimeID = '559'; // Visforms end time (text) field ID of field list
const sleepingTimeID = '560'; // Visforms start time (text) field ID of field list
function calculateHours() {
// Get values from input fields
const startDateValue = jQuery(`#field${startDateID}`).val();
const startTimeValue = jQuery(`#field${startTimeID}`).val();
const endDateValue = jQuery(`#field${endDateID}`).val();
const endTimeValue = jQuery(`#field${endTimeID}`).val();
const startDateFormat = jQuery(`#field${startDateID}_btn`).attr('data-date-format');
const endDateFormat = jQuery(`#field${endDateID}_btn`).attr('data-date-format');
if(startDateValue === '' || startTimeValue === '' || endDateValue === '' || endTimeValue === '' ) {
return;
}
// Create date objects
const startDate = addTimeToDate(stringToDate(startDateValue, startDateFormat), startTimeValue);
const endDate = addTimeToDate(stringToDate(endDateValue, endDateFormat), endTimeValue);
// Calculate time difference in milliseconds
const timeDifference = endDate - startDate;
// Convert milliseconds to hours
let hoursDifference = timeDifference / (1000 * 60 * 60);
// Round to 2 digits
hoursDifference = Math.round((hoursDifference + Number.EPSILON) * 100) / 100
// Display the result
jQuery(`#field${sleepingTimeID}`).val(hoursDifference);
}
// Call the function when any of the relevant fields change
jQuery(`#field${startDateID}, #field${startTimeID}, #field${endDateID}, #field${endTimeID}`).on('change', calculateHours);
// You can also call the function initially if needed
// calculateHours();
});
function stringToDate(date, format) {
// parsing a string into a date
const delimiter = format.charAt(2);
const formatLowerCase = format.toLowerCase();
const formatItems = formatLowerCase.split(delimiter);
const dateItems = date.split(delimiter);
const monthIndex = formatItems.indexOf("%m");
const dayIndex = formatItems.indexOf("%d");
const yearIndex = formatItems.indexOf("%y");
const month = parseInt(dateItems[monthIndex]) - 1;
return new Date(dateItems[yearIndex], month, dateItems[dayIndex]);
}
function addTimeToDate(date, time) {
// replace all spaces
time = time.replace(/\s/g, '');
// split hours and minutes
const parts = time.split(':');
if(parts[0] === '') {
// empty time string
return date;
}
else if(parts.length == 1) {
// only hour present
date.setHours(parseInt(parts[0]));
return date;
}
else {
// hour and minutes present
date.setHours(parseInt(parts[0]), parseInt(parts[1]));
return date;
}
}