JavaScript Beispiele Teil 1 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:
- Code erst dann ablaufen lassen, nachdem das HTML Dokument initialisiert wurde.
- 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.
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:
- Code erst dann ablaufen lassen, nachdem das HTML Dokument initialisiert wurde.
- 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:
- Code erst dann ablaufen lassen, nachdem das HTML Dokument initialisiert wurde.
- 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:
- Code erst dann ablaufen lassen, nachdem das HTML Dokument initialisiert wurde.
- 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;
}
}
Das Alter aufgrund des Geburtsdatums berechnen und anzeigen
Themen
Die folgenden Themen sind im Beispiel enthalten:
- Code erst dann ablaufen lassen, nachdem das HTML Dokument initialisiert wurde.
- Code erst dann ablaufen lassen, nachdem das Formular seitens Visforms initialisiert wurde.
- Auf Änderungen durch den Benutzer reagieren.
- Ermitteln der gewählten Werte von Datums-Feldern.
- Ermitteln des individuell konfigurierten Datums-Formates der Datums-Felder.
- Programmieren und Rechnen mit Datums-Werten.
- Parsen eines Datums im Text-Format in ein JavaScript “Date” Objekt.
- Berechnung des Alters basierend auf dem Geburtsdatum in einer Hilfsfunktion.
- Ausgabe in ein Text-Feld des Formulars.
Beschreibung
Der Anwender gibt sein Geburtsdatum in einem Datums-Feld an. Das Formular berechnet aus dem Geburtsdatum sein Alter und zeigt es in einem schreibgeschützten Text-Feld an.
Formular ohne Auswahl des Geburtsdatums
Das Feld birth-date startet mit dem aktuellen Datum.
Das ist eine Einstellung in der Feld-Konfiguration, Reiter Grundeinstellungen:
- Parameter Feld füllen mit steht auf Ausgewählter Datumswert / Aktuelles Tagesdatum.
- Parameter Aktuelles Tagesdatum ist aktiviert.
Das Feld age zeigt folglich zu Beginn ein Alter von 0 Jahren an.
Sein Wert kann durch den Anwender nicht direkt verändert werden.
Das ist eine Einstellung in der Feld-Konfiguration, Reiter Grundeinstellungen:
- Parameter Read only ist aktiviert.
Formular mit Auswahl des Geburtsdatums
Formular-Konfiguration
Der JavaScript-Code
// calculate age based on date field and show the age in a text field
jQuery(document).ready(function() {
console.log('FEWA script loaded');
const birthDateID = '582'; // Visforms birth date field ID of field list
const ageID = '583'; // Visforms text field ID of field list to show the age
// Call the function when any of the relevant fields change
jQuery(`#field${birthDateID}`).change({birthDateID: birthDateID, ageID: ageID}, function (event) { calculateAge(event.data.birthDateID, event.data.ageID); });
// initialize age field after form is initialized
jQuery('.visform').bind('visformsInitialised', function() {
calculateAge(birthDateID, ageID);
});
});
function calculateAge(birthDateID, ageID) {
console.log(birthDateID);
// get values from input fields
const birthDateValue = jQuery(`#field${birthDateID}`).val();
const birthDateFormat = jQuery(`#field${birthDateID}_btn`).attr('data-date-format');
// helper function to get date object
const birthDate = stringToDate(birthDateValue, birthDateFormat);
// helper function to calculate the age
const age = calculateYear(birthDate);
// set and show the age
jQuery(`#field${ageID}`).val(age);
}
function stringToDate(date, format) {
// parsing a string into a date depending on the date string format
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 calculateYear(date) {
// calculate the difference in milliseconds
// between the current date and the provided date of birth
const diff_ms = Date.now() - date.getTime();
// create a new Date object representing the difference in milliseconds
// and store it in the variable age_dt (age Date object)
const age_dt = new Date(diff_ms);
// calculate the absolute value of the difference in years
// between the age Date object and the year 1970 (UNIX epoch)
return Math.abs(age_dt.getUTCFullYear() - 1970);
}
Anpassung an Ihr Formular
Folgende Anpassungen sind am JavaScript-Code sowie Ihrem Formular notwendig:
- Ändern Sie im JavaScript-Code den Wert der Variablen birthDateID auf die ID Ihres Datum-Feldes.
- Ändern Sie im JavaScript-Code den Wert der Variablen ageID auf die ID Ihres Ausgabe-Feldes.
Formular in der Detail-Ansicht mit Daten der Detail-Ansicht Initialisieren
Themen
Die folgenden Themen sind im Beispiel enthalten:
- Code erst dann ablaufen lassen, nachdem das HTML Dokument initialisiert wurde.
- Die Code-Ausführung for der Initialisierung 1 Sekunde pausieren.
- Kopieren von Feld-Werten aus der Daten-Detailansicht in die Formular-Felder auf der gleichen Seite.
- Zu kopierende Werte als kleine Quelle-Ziel-Arrays zu einem großen Array zusammenfassen.
Beschreibung
In der Frontend-Ansicht Daten-Detail zum Formular Kontakt ist mit einem Visforms-Modul ein zweites Formular Hotline Anfrage eingebettet.
Dieses zweite Formular Hotline Anfrage soll mit den Werten der Frontend-Ansicht Daten-Detail initialisiert werden.
Damit sind im Formular Hotline Anfrage alle notwendigen Angaben zum Benutzer automatisch gefüllt.
Der Benutzer hat nur noch die beiden Felder Betreff und Nachricht seiner Hotline-Anfrage einzutragen. \
Danach kann er sein Formular mit allen Benutzer-Informationen abschicken.
Das Formular
Die Formular-Konfiguration
Der JavaScript-Code
// initialize embedded form fields with data from detail data view
jQuery(document).ready(function() {
console.log('FEWA script loaded');
// set simple window timeout: 1 sec
window.setTimeout(function () {
// format: [from-ID , to-ID]
const IDs = [ [197,552], [198,553], [199,554], [200,555], [201,556], [202,557], [203,558], [204,559] ];
IDs.forEach((elem, idx, arr) => {
const srce = elem[0]; // from-ID
const dest = elem[1]; // to-ID
jQuery(`#field${dest}`).val(jQuery(`td.vfdvvalue.data-f${srce}`).text());
});
}, 1000);
});
Folgende Anpassungen an Ihre Situation sind notwendig:
- Das Array mit den zu kopierenden Feld-IDs:
const IDs = [ [197,552], [198,553], [199,554], [200,555], [201,556], [202,557], [203,558], [204,559] ]; - Beispiel: Eintrag für das Kopieren vom Daten-Detail mit der ID 197 (from-ID) zum Formular-Feld mit der ID 552 (to-ID):
[197,552],