Formularfelder dynamisch ein- und ausblenden
Veröffentlichungsdatum: 26. September 2017
Änderungsdatum: 18. Oktober 2021
formulare dynamisch formularfelder
Mit Weblication® können Sie Formularfelder abhängig von der Auswahl eines anderen Formularfeldes ein- bzw. ausblenden.
Auf Grundlage eines aktuellen Weblication® Formular-Weblics und dem Formulareditor-Modul können Sie Formularfelder in Abhängigkeit anderer Formularfelder ein- bzw. ausblenden.
Einsatz ab Weblication® CMS Version 12.x.
Im Beispiel ist ein Formular umgesetzt, welches eine Auswahlbox (select) für diverse Interessen zur Auswahl anbietet.
Wenn der Seitenbesucher als Interesse "Programmierung" auswählt, wird das Formularfeld (textarea) zur Eingabe der Details der Programmierinteressen eingeblendet.
Die Formularfelder setzen Sie wie gewohnt. Zur Steuerung des Aus- und Einblendens verwenden Sie ab aktueller Weblication® CMS-Version 12.x das Formularelement "Bedingter Container mit Formularelementen".
Über den bedingten Container mit Formularelementen beziehen Sie sich in der Prüfung auf das Quell-Feld (z.B. Interessen (Feldname: interests) und geben an, welche Bedingung erfüllt sein muß (hier: Auswahl Programmierung (Feld-Wert: coding)).
Im Beispiel ist ein Formular umgesetzt, welches eine Auswahlbox (select) für diverse Interessen zur Auswahl anbietet.
Wenn der Seitenbesucher als Interesse "Programmierung" auswählt, wird das Formularfeld (textarea) zur Eingabe der Details der Programmierinteressen eingeblendet.
Die Formularfelder setzen Sie wie gewohnt. Zur Steuerung des Aus- und Einblendens setzen Sie nach dem Formular-Element ein Javascript-Element mit dem entsprechenden Javascript-Code (siehe unten).
Beispiel: Javascript-Code zum Ein- und Ausblenden der betreffenden Felder
jQuery('#interests').change(function(){
if(jQuery(this).val() == 'coding'){
jQuery('#coding').parent().show();
jQuery('#coding').parent().prev('dt').show();
}
else{
jQuery('#coding').parent().hide();
jQuery('#coding').parent().prev('dt').hide();
}
});
/* Weiteres Beispiel (nicht oben im Beispiel umgesetzt) */
/*
Abhängig von einem gewählten Radiobutton den Wert eines anderes Feldes ändern (z.B. für Tarifrechner)
Über den selector input:radio[name^=person] wählen Sie alle Radio
Feldelemente des Formulares aus, deren Name mit "person" beginnen
*/
jQuery('input:radio[name^=person]').change(function(){
/*Hier setzen Sie abhängig vom ausgewählten Wert das Feld verbrauch*/
if(jQuery(this).val() == 'person1'){
jQuery('#verbrauch').val(2500);
}
else if(jQuery(this).val() == 'person2'){
jQuery('#verbrauch').val(3500);
}
else if(jQuery(this).val() == 'person3'){
jQuery('#verbrauch').val(4500);
}
});
- Den über das Weblic® / Strukturelement "JavaScript Quelltext einbinden" eingebundenen Javascript-Code dürfen Sie nicht im Head der Seite einbinden, sondern an der Stelle des Elementes (Auswahl: "Hier einbinden")!
- Pflichtfelder werden bei ausgeblendeten Formularelementen nur bedingt berücksichtigt (möglich z.B. ... orEmpty), weshalb Sie dies ggf. selber über das Formular-Skript berücksichtigen müssen.
Wichtig
Verschachtelte Bedingungen sollten sich nicht darauf verlassen, daß eine Bedingung bzw. Auswahl weiter oben gesetzt ist. Man sollte bei inneren Bedingungen die äussere immer auch nochmals mit abfragen.