Beispiele

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:

  • 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.

Summe von vielen Feldern berechnen und anzeigen.

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.

Die 6 Summen-Felder.

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.

Das Ergebnis-Feld.

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.

Ausgef├╝lltes Datums-Feld

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.

Leeres Formular: Ein Spambot Honeypot ist eingerichten. Spammer am Werk: Ein Spambot Honeypot ist eingerichten.

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.

Leeres Formular: Mit Datums-Feldern und Zeit-Feldern eine Zeitspanne erfassen. Gef├╝lltes Formular: Mit Datums-Feldern und Zeit-Feldern eine Zeitspanne erfassen.

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 ohne Auswahl des Geburtsdatums

Formular mit Auswahl des Geburtsdatums

Formular mit Auswahl des Geburtsdatums

Formular-Konfiguration

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

Das Formular

Die Formular-Konfiguration

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],