Weitere Beispiele

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

Der Quersumme eines Zahlen-Feldes 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.
  • Betroffene Felder anhand ihrer Feld-ID ansprechen.
  • Ausgabe in ein Text-Feld des Formulars.

Beschreibung

Ein Formular hat unter anderen 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

Das Formular

Die Formular-Konfiguration

Die Formular-Konfiguration

Der JavaScript-Code

// calculate cross sum
jQuery(document).ready(function() {
	console.log('FEWA script loaded');
	// use the field IDs to connect to the form fields
	let fieldIDNumber = 76;
	let fieldIDText   = 459;
	jQuery('#field' + fieldIDNumber).on('change', function(e) {
		// user changed the value in the form
		const value = jQuery(this).val();
		jQuery('#field' + fieldIDText).val(crossSum(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;
}

Bedingte Felder mit logischem UND

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

Ist Textfeld 'text-3' versteckt, werden auch keine Daten f√ľr das Feld beim Absenden des Formulars √ľbertragen.

Formular mit keiner Benutzer-Auswahl

Formular mit keiner Auswahl

Formular mit erster Benutzer-Auswahl

Formular mit erster Auswahl

Formular mit zweiter Benutzer-Auswahl

Formular mit zweiter Auswahl

Formular mit dritter Benutzer-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.

Formular-Konfiguration Reiter 'Frontend Webassets', Reiter 'Formular'

Der JavaScript-Code

/// conditional field: AND-condition of checkbox and radio control first selection
const idForm     = 49;
const idCheckbox = 492;
const idText     = 494;
const nameRadio  = 'radio-1';
jQuery(document).ready(function() {
	console.log('FEWA script loaded');
	handleChanged();
	jQuery(`input[type=radio][name="form${idForm}${nameRadio}"], #field492`).on('change', function(){
		handleChanged();
	});
});
function handleChanged() {
	let checkbox = jQuery(`#field${idCheckbox}`).is(':checked');
	let radio = jQuery(`input[name="form${idForm}${nameRadio}"]:checked`).val();
	if(checkbox && radio === 'value1') {
		// show
		jQuery(`.field${idText}`).css('display', '');
		jQuery(`#field${idText}`).removeClass('ignore').prop('disabled', false);
	}
	else {
		// hide
		jQuery(`.field${idText}`).css('display', 'none');
		jQuery(`#field${idText}`).addClass('ignore').prop('disabled', true);
	}
}

Zeit f√ľr Text-Feld ausw√§hlen

Themen

Die folgenden Themen sind im Beispiel enthalten:

  • Code erst dann ablaufen lassen, nachdem das HTML Dokument initialisiert wurde.
  • Einbinden einer fremden JavaScript Bibliothek.
  • Initialisierung eines ausgew√§hlten Formular-Feldes anhand seiner Feld-ID.

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 verschiedene Einstellungen zum Zeit-Format und √§hnliche Themen versehen.

Mit wenig Aufwand und einem kurzen √ľbersichtlichem 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.

Formular mit Zeit-Feldern

Formular mit Zeit-Feldern

Feld time-1 mit Format “AM/PM”

Zeit-Feld mit Zeit-Format 'AM/PM' Zeit-Feld mit Zeit-Format 'AM/PM'

Feld time-2 mit Format “24 Stunden”

Zeit-Feld mit Zeit-Format '24 Stunden' Zeit-Feld mit Zeit-Format '24 Stunden'

Der JavaScript-Code

Entsprechend den gesetzen Werten im JavaScript-Code, werden in den Listboxen Uhrzeiten zur Auswahl angezeigt:

  • im jeweiligen Zeit-Format timeFormat,
  • in 30 Minuten Schritten interval,
  • von 8 Uhr morgens minTime,
  • bis 22 Uhr abends maxTime.
// load the timepicker library
jQuery("<link/>", {
    rel: 'stylesheet',
    type: 'text/css',
    href: '//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css'
}).appendTo("head");
jQuery("<script/>", {
    src: '//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js'
}).appendTo("head");

// initialize and configure fields
jQuery(document).ready(function() {
    console.log('FEWA script loaded');
    
    // field 'time-1' with 12 hour format
    const fieldID1 = 498;
    jQuery(`#field${fieldID1}`).timepicker({
        timeFormat: 'h:mm p',
        interval: 30,
        minTime: '8:00am',
        maxTime: '10:00pm',
        dynamic: false,
        dropdown: true,
        scrollbar: true
    });
    
    // field 'time-2' with 24 hour format: fix start and end time
    const fieldID2 = 499;
    jQuery(`#field${fieldID12}`).timepicker({
        timeFormat: 'HH:mm',
        interval: 30,
        minTime: '8:00',
        maxTime: '22:00',
        dynamic: false,
        dropdown: true,
        scrollbar: true,
    });
});

Zeit f√ľr Text-Feld ausw√§hlen mit mindestens 3 Stunden Offset

Themen

Die folgenden Themen sind im Beispiel enthalten:

  • Einbinden einer fremden JavaScript Bibliothek: jQuery Timepicker
  • Code erst dann ablaufen lassen, nachdem das HTML Dokument initialisiert wurde.
  • Auf √Ąnderungen durch den Benutzer reagieren.
  • Steuerung der Art der Anzeige eines Feldes vom Typ Text.
  • Initialisierung eines ausgew√§hlten Formular-Feldes anhand seiner Feld-ID.
  • Berechnung eines Zeit-Offsets mit dem JavaScript Date Objekts.

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, steht das Zeit-Feld zur Eingabe bereit.
  • Wird das Datum neu gew√§hlt, kommt es zum Zur√ľcksetzen der im Zeit-Feld gemachten Eingabe.

Denn der aktuelle Tag muss speziell behandelt werden, da hier der zeitliche Vorlauf von 3 Stunden offset zusätzlich angewendet werden muss. An allen anderen Tagen ist die Auswahl der Zeitbegrenzung allein durch die Konfiguration von Start-Zeit minTime und End-Zeit maxTime festgelegt.

Feld time-3 mit 3 Stunden Offset

Die Zeitauswahl f√ľr dieses Beispiel wurde um 12:20 Uhr durchgef√ľhrt. Die erste m√∂gliche ausw√§hlbare Zeit in der Listbox ist daher um 15:30 Uhr.

Start des Formulars

Start des Formulars

Heute als Datum ausgewählt

Heute als Datum ausgewählt

Morgen als Datum ausgewählt

Morgen als Datum ausgewählt

Zeit ausgewählt

Zeit ausgewählt

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.

Formular-Konfiguration Reiter 'Frontend Webassets', Reiter 'Formular'

jQuery Timepicker

Die JavaScript-Bibliothek jQuery Timepicker ist ein jQuery Plugin. Sie dient zur Erweiterung von Standard-Formulareingabefeldern. Es hilft Benutzern, aus vordefinierten Zeiten auszuwählen.

Es verf√ľgt √ľber eine Dokumentation mit live-Konfigurator und eine Erl√§uterung m√∂glicher Konfigurations-Optionen.

Der JavaScript-Code

Entsprechend den gesetzen Werten im JavaScript-Code, werden in den Listboxen Uhrzeiten zur Auswahl angezeigt:

  • im jeweiligen Zeit-Format timeFormat,
  • in 30 Minuten Schritten interval,
  • von 8 Uhr morgens minTime,
  • bis 20 Uhr abends maxTime,
  • mindestens 3 Stunden in der Zukunft offset.
// load the timepicker library
jQuery("<link/>", {
    rel: 'stylesheet',
    type: 'text/css',
    href: '//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css'
}).appendTo("head");
jQuery("<script/>", {
    src: '//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js'
}).appendTo("head");

// initialize and configure fields
const vfDateID = 497; // Visforms date field ID of field list
const vfEditID = 500; // Visforms time edit field ID of field list
jQuery(document).ready(function() {
    // console.log('FEWA script loaded');
    jQuery(`#field${vfEditID}`).prop('disabled', true);
    jQuery(`#field${vfDateID}`).on('change', function() {
        const selected = jQuery(this).val();
        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) {
            initializeTimeField(true);
        }
        else {
            initializeTimeField(false);
        }
    });
});
function initializeTimeField(addOffset) {
    // initialize and configure field
    const offset = 3; // offset in hours
    let minTime = '8:00';
    if(addOffset) {
        const d = new Date();
        d.setTime(d.getTime() + (offset * 60 * 60 * 1000));
        minTime = String(d.getHours()).padStart(2, '0') + ':' + String(d.getMinutes()).padStart(2, '0');
    }
    jQuery(`#field${vfEditID}`).val('');
    jQuery(`#field${vfEditID}`).prop('disabled', false);
    jQuery(`#field${vfEditID}`).timepicker('destroy').timepicker({
        timeFormat: 'H:mm',
        interval: 30,
        minTime: minTime,
        maxTime: '20:00',
        dynamic: false,
        dropdown: true,
        scrollbar: true
    });
}

Folgende Anpassungen an Ihre Situation sind notwendig:

  • const vfDateID = 497 Die Visforms Datums-Feld-ID aus der Feldliste.
  • const vfEditID = 500 Die Visforms Text-Feld-ID aus der Feldliste.
  • const offset = 3 Der Offset in Stunden.
  • let minTime = ‘8:00' Die fr√ľheste ausw√§hlbare Tages-Zeit.
  • maxTime: ‘20:00' Die sp√§teste ausw√§hlbare Tages-Zeit.
  • interval: 30 Der Zeitanstand der ausw√§hlbaren Tages-Zeiten in Minuten.

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

Das Formular

Die Formular-Konfiguration

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');
        }
    });
});

Der Anzahl gewählter Optionen bei Mehrfachselektion

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

Das Formular: Keine Option ausgewählt Das Formular: 1 Option ausgewählt Das Formular: 2 Optionen ausgewählt Das Formular: 3 Optionen ausgewählt

Die Formular-Konfiguration

Die Formular-Konfiguration

Der JavaScript-Code

jQuery(document).ready(function() {
    console.log('FEWA script loaded');
    const selectID = 564;
    const editID   = 565;
    // update on user selection changed
    jQuery(`#field${selectID}`).on('change', function() {
        const count = jQuery(`#field${selectID} :selected`).length;
        jQuery(`#field${editID}`).val(count);
    });
    // Initialize edit field with '0'
    jQuery('.visform').bind('visformsInitialised', function() {
        jQuery(`#field${editID}`).val(0);
    });
});

Folgende Anpassungen an Ihre Situation sind notwendig:

  • const selectID = 564 Die Visforms Feld-ID aus der Feldliste der Mehrfachselektion-Listbox.
  • const editID = 565 Die Visforms Feld-ID aus der Feldliste des Textfeldes zur Ausgabe.