Formularfelder dynamisch ein- und ausblenden

Nutzbar ab: Version 10.x

17. Dez 2015

Mit Weblication® können Sie Formularfelder abhängig von der Auswahl eines anderen Formularfeldes ein- bzw. ausblenden.

Auf Grundlage eines aktuellen Weblication® Formular-Weblics können Sie Formularfelder in Abhängigkeit anderer Formularfelder ein- bzw. ausblenden.

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 Interessenzoom
Kontaktformular mit Auswahlbox Interessen
Kontaktformular mit Auswahl Interesse und eingeblendetem Detail-Feldzoom
Kontaktformular mit Auswahl Interesse und eingeblendetem Detail-Feld
Kontaktformular - Formularbearbeitung der Formularfelderzoom
Kontaktformular - Formularbearbeitung der Formularfelder
Kontaktformular - Formularbearbeitung mit JS-Feldzoom
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.

Entwicklerbereich Weblication® CMS - © Scholl Communications AG