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:

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

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:

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

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

  • 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;
	}
}