Formularfelder dynamisch ein- und ausblenden

Nutzbar ab: Version

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.

Umsetzung über den Formulareditor
Umsetzung über den Formulareditor (manuell (ALT))
Umsetzung über den Formulareditor

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

Kontaktformular mit Auswahlbox Interessen
Kontaktformular mit Auswahl Interesse und eingeblendetem Detail-Feld
Kontaktformular - Formularbearbeitung der Formularfelder

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

Umsetzung über den Formulareditor (manuell (ALT))

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

Kontaktformular mit Auswahlbox Interessen
Kontaktformular mit Auswahl Interesse und eingeblendetem Detail-Feld
Kontaktformular - Formularbearbeitung der Formularfelder
Kontaktformular - Formularbearbeitung mit JS-Feld

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.