[GELÖST] Formbuilder - Dropdownoptionsauswahl bedingt dyn Verstecken v. Feldern

Jadawin · 29. August 2011 14:19

Hallo zusammen.

Ich wollte euch um eure Hilfe/Meinungen bitten. Bin zwar noch relativ neu bei CMSMS, aber habe mich schon in die Materie reingelesen. Jedoch scheine ich im Moment vor lauter Bäumen den Wald nicht mehr zu sehen :-(

Ich würde gern ein Formular erstellen, bei dem ich ein Dropdown-Feld habe mit verschiedenen Optionen.
Je nachdem welche Option gewählt wird, werden von einigen bestimmten nachfolgenden Feldern welche versteckt und andere nicht (unterschiedlich und abhängig von der ausgewählten Option).

Als Lösung hab ich mir folgendes gedacht:
Grundidee:
Da ich jedes Feld meines 2-spaltigen Formulars in ein Div packe, weise ich den entsprechenden Divs optionsauswahlbedingt (des Dropdown-Felds) eine Klasse showDiv bzw hideDiv zu und definiere das entsprechend im CSS (da es ausreicht anstatt zu verstecken einfach das entsprechende Div im Tabellenelement nicht bzw ein leeres Tabellenelement anzuzeigen).
Ausführung:
1) Defnieren einer Array-Variablen hideOption entsprechend der festen Anzahl der Felder, die dyn. versteckt oder eben nicht werden:
$this->assign("hideOption", array(fieldname1=>'showDiv',fieldname2=>'showDiv',...))
2) In der foreach-Schleife den Div's der Felder, die versteckt werden sollen die jeweilige Klasse zuweisen:
<div {if $entry->name == "feldname1" || $entry->name == "feldname2" || ...}
class="$hideOption.[$entry->name]"
{/if}>
3) onchange beim Dropdown Feld definieren:
onchange="set_hideOption('{options[selectedIndex].value}','{$hideOption}')"
4) Meine js-Methode set_hideOption:
function set_hideOption(chosen,array) {
var hideOption = array;
if (chosen == " ") {
hideOption[0]="showDiv";
...
}
if (chosen == "1") {
hideOption[0]="hideDiv";
...
}
if (chosen == "2") {
hideOption[0]="showDiv";
...
}
if (chosen == "3") {
hideOption[0]="hideDiv";
...
}
...
}
5) CSS anpassen für die Klassen hideDiv und showDiv

Jetzt habe ich das Problem, dass das ganze nicht funktioniert.
Ein Problem dürfte die var hideOption sein, die ich ja nochmal lokal in der js-Methode definiere.
Theoretisch könnte ich das doch umgehen, in dem ich diese als globale Array-Variable vor der js-Methode definiere (und Schritt 1 weglasse)?
Oder sollte ich die Problemstellung einfach mit ner UDT lösen?
Gibt es eine einfachere, elegantere Lösung, die ich grad nicht sehe?

Für euer Feedback / Hilfe / Anregungen / Kommentare wäre ich sehr dankbar.

Beitrag geändert von Jadawin (29. August 2011 14:28)

Jadawin · 30. August 2011 12:44

Hallo nochmal zusammen.

Da ich mit der obengenannten Idee nicht vorwärts gekommen bin, habe ich einen neuen Ansatz big_smile

Ich definiere eine Variable fieldTemp im Formular-Template:

{assign var="fieldTemp" value="0"}

Bei onchange-Event des bestimmenden Dropdown-Felds:

onchange="set_fieldTemp(this.value);"

rufe ich die js.Methode set_fieldTemp (mit dem jeweiligen value der ausgewählten Dropdown-Feld-Option) auf, die dann dieser Variable fieldTemp entsprechend einen Wert zuweist:

Dann bestimme ich im Formular-Template in der foreach-Schleife mittels {if} die Div Klasse der auszublendenden Felder:
<div id="id_{$entry->name}"
{if $entry->name == "nameAuszublendendesFeld1" OR $entry->name == "nameAuszublendendesFeld2" OR ...weitereAuszublendendeFelder....} class="
{if $fieldTemp == 0}hideDiv{/if}
{...weitere if-Schleifen...}
"
{/if}
>

welche dann mittels CSS entsprechend dargestellt werden:
.hideDiv {
display: none;
}

Leider funktioniert das Ganze noch nicht wirklich. Mein Problem ist einmal wo muss ich die Variable fieldTemp definieren, damit sie sowohl in der js-Methode als auch im Template verfügbar ist? Ausserdem was ist an meinem onchange-Aufruf falsch, dass dieser nicht funktioniert?

Für jede Hilfe oder kleinste Anregungen schon mal im Voraus vielen Dank.

NaN · 30. August 2011 13:54

Kann man das Formular vielleicht mal irgendwo in Aktion sehen?
Das ist mir grad zu viel Theorie wink

Prinzipiell würde ich es so ähnlich machen.
Ein onchange Event das eine Funktion aufruft der der ausgewählte Wert übergeben wird und die dann je nach Wert die zugehörigen anderen Optionen ein/ausblendet. Klingt soweit logisch. Aber ich muss das Formular sehen um zu wissen, welche Möglichkeiten man hat, die anderen Elemente anzusprechen und ein-/auszublenden oder was man wie übergeben könnte und wo genau evtl. der Fehler bei Deiner Umsetzung liegt.

piratos · 30. August 2011 15:22

Xajax einsetzen So macht man es

NaN · 30. August 2011 15:37

Wozu braucht man dazu Xajax???
Xajax hilf da überhaupt nicht weiter.
Eine Formbuilder-spezifische Lösung sieht anders aus.

Hab das gerade selber mal versucht auf die Beine zu stellen. Dabei ist mir übrigens ein Fehler im Formbuilder bei Dropdown-Feldern aufgefallen. Egal welchen Wert man für die einzelnen Optionen einträgt, die Werte sind immer 1,2,3,4,...,n
Jede Option erhält also als Wert immer die Position im Dropdown.
Das nur mal so nebenbei.

Mein Ansatz ist folgender:

Das Dropdown-Feld erhält eine ID (z.B. 'dropdown').
Jedes Formularelement, das durch dieses Dropdown ein- oder ausgeblendet werden soll, erhält als CSS-Klasse die ID des Dropdowns.
Jedes dieser Formularemelente erhält eine ID. Diese ID muss als Suffix den Wert der Option des Dropdown-Feldes haben, der dieses Element einblenden soll. (z.B. 'option_1')

Das Dropdown-Feld erhält ein onchange Event das eine Funktion aufruft, die als Argument das komplette Dropdown übergeben bekommt: onchange="toggleFormElm(this)"

Die Funktion sieht folgendermaßen aus:

Hier klicken, um den Code zum Kopieren zu markieren

function toggleFormElm(elm) {
    var options2toggle = document.getElementsByClassName(elm.id);
    for(var i = 0; i < options2toggle.length; i++) {
        var subStrStart = eval(options2toggle[i].id.length - elm.value.length);
        options2toggle[i].style.display = (elm.value != '' && options2toggle[i].id.substring(subStrStart) == elm.value ? 'block' : 'none');
    }
}

(einfach mit ins Formular-Template in den Scriptbereich einfügen)

Im Formulartemplate erhält jedes Div, das ein Formularelement umschließt, eine ID. Diese ID muss als Suffix die ID des Formularelements haben. (z.B. 'wrapper_{$entry->input_id}').

Hier ist mal ein Beispiel-Formular als XML Datei:
test_js_dropdown.zip
(Einfach runterladen, entpacken und beim Formbuilder importieren).
Diesen Ansatz kann man im Prinzip für jedes x-beliebige Formbuilder Formular anwenden.

piratos · 30. August 2011 15:59

NaN schrieb:

Wozu braucht man dazu Xajax???
Xajax hilf da überhaupt nicht weiter.

So so.
Na wenn du meinst. big_smile

NaN · 30. August 2011 16:08

piratos schrieb:

So so.
Na wenn du meinst.

Ja, meine ich.
Ob ich dazu Xajax verwende oder nicht, spielt überhaupt keine Rolle.
Denn das Problem ist nicht Xajax, sondern wie ich das Formbuilder Formular aufbaue und mit einer Javascript-Funktion verknüpfe.
Das Formular aufbauen und die zugehörige Javascript-Funktion muss ich auch beim Einsatz von Xajax selber machen.
Ich will ja nicht leugnen, dass Xajax so seine Vorteile bieten kann, aber in diesem Falle ist es einfach nicht nötig, Core-Dateien zu manipulieren, nur um eine einfache Javascript-Sache zu regeln. Es ist ja nicht so, dass der Browser ohne Xajax nichts mit Javascript anfangen kann.

piratos · 30. August 2011 17:07

NaN schrieb:

Core-Dateien zu manipulieren

Na zwei Zeilen das ist ein Mikroeingriff.
Wer Xajax kennt weiss das man sich im Vergleich zu JS Direkt jede Menge Zeit und Arbeit spart.

Ich kenn zwar die Form hier nicht im Detail kann dir aber jetzt schon sagen umständlicher geht es wohl nicht mehr.

Aber jeder wie er will.

NaN · 30. August 2011 20:47

piratos schrieb:

Ich kenn zwar die Form hier nicht im Detail kann dir aber jetzt schon sagen umständlicher geht es wohl nicht mehr.

Wieso umständlich?
Das ist extrem einfach und flexibel.
Vor allem für jedes Formbuilder Formular vewendbar.
Man muss nur die Felder entsprechend benennen.

Man könnte natürlich auch mit Xajax, die Elemente serverseitig ein-/ausblenden. Das ist sogar empfehlenswert, weil dann tatsächlich nur die Felder im Formular sind, die auch ausgefüllt werden sollen. Xajax könnte man also als die sauberere Methode verstehen. Aber die ist nicht weniger umständlich. Die nötigen Schritte sind dabei ziemlich genau die gleichen + Xajax. Denn das Formular muss man auf Formbuilder-Seite so oder so irgendwie strukturieren, damit man weiß welche Felder man ein-/ausblenden soll. Und das Template muss man ebenfalls nicht weniger anpassen.

Meine Idee war eigentlich nur die, dass man über die ID des Dropdowns, dessen Wert und die CSS Klassen der einzelnen Felder alles ansteuern kann, was man will, was zu diesem Dropdown und seiner Auswahl gehört und dabei dennoch flexibel zu bleiben. Ob man das nun rein mit Javascript und CSS macht, oder dazu Xajax verwendet, ist eigentlich nur reine Formsache.

Für die Xajax-Variante würde man folgende Schritte benötigen:

Das Dropdown-Feld erhält eine ID (z.B. 'dropdown').
Jedes Formularelement, das durch dieses Dropdown ein- oder ausgeblendet werden soll, erhält als CSS-Klasse die ID des Dropdowns.
Jedes dieser Formularemelente erhält eine ID.
Diese ID muss als Suffix den Wert der Option des Dropdown-Feldes haben, der dieses Element einblenden soll. (z.B. 'option_1')
Die Formularelemente, die vom Dropdown ein-/ausgeblendet werden sollen, fasst man am besten mit einem Fieldset zusammen.
Dieses Fieldset bekommt eine ID (z.B. 'dropdown_fields').
(Nicht lachen, die deutsche Übersetzung von "Fieldset" heißt beim Formbuilder "Feldeinstellung")

Das Dropdown-Feld erhält ein onchange Event das eine Funktion aufruft, die als Argumente ein Array, bestehend aus der ID des Dropdowns und dem ausgewählten Wert, und die ID des Fieldsets übergeben bekommt:

Hier klicken, um den Code zum Kopieren zu markieren

onchange="xajax_toggleFormElm( [this.id, this.value] , 'dropdown_fields' )"

Zusätzlich erstellt man eine Datei namens... z.B. "fb.tpl" mit folgendem Inhalt:

Hier klicken, um den Code zum Kopieren zu markieren

{FormBuilder form="Name des Formulars"}

Diese speichert man unter /tmp/templates.

Die include2.php könnte dann z.B. so aussehen:

Hier klicken, um den Code zum Kopieren zu markieren

<?php
$smarty->assign('xajaxheadtext','');
if (!defined('frontend'))
    return;

define('XAJAX_DEFAULT_CHAR_ENCODING',$config['default_encoding']);
require_once('lib/xajax/xajax_core/xajax.inc.php');
$xajax = new xajax();

/*
 * Hier die Xajaxfunktionen registrieren
 */

$xajax->register(XAJAX_FUNCTION, 'toggleFormElm');

/*
 * Ende Register
 */

$xajax->processRequest();

/*
 * {$xajaxheadtext}  in den Metabereich des Haupttemplates einbinden
 */
$smarty->assign('xajaxheadtext',$xajax->getJavascript('lib/xajax'));

/*
 * hier unsere Funktion...
 * Diese Funktion weist die ID des Dropdowns und den im Dropdownausgewählten Wert im array $xajax_selected_value dem Template zu
 * Im Formbuilder Template können wir dann mit {$xajax_selected_value[0]} auf die ID und mit {$xajax_selected_value[1]} auf den Wert des Dropdowns zugreifen (dazu mehr im Formular-Template)
 */

function toggleFormElm($params,$htmlid)
{   
    $or     = new xajaxResponse();    
    $gCms   = cmsms();
    $smarty = $gCms->GetSmarty();
    $smarty->assign('xajax_selected_value', $params);
    $out = $smarty->fetch('fb.tpl');
    $or->assign($htmlid, "innerHTML",$out);
    return $or;
}

?>

Im Formular-Template prüft man dann, ob die Variable {$xajax_selected_value} existiert, um festzustellen, ob gerade ein Xajax-Request vorliegt. Somit kann man all die Elemente, die nicht nochmal ausgegeben werden sollen, ausblenden. Innerhalb der {foreach}-Schleife kann man dan prüfen, ob die Felder zum jeweiligen Dropdown gehören und ob sie angezeigt werden sollen.

Wer eine bessere Methode kennt, wie man die ein-/auszublendenden Felder dem Dropdown und seinem Wert zuordnet, als über IDs und Klassen ohne noch weitere Libaries einbinden zu müssen, immer her damit. Ich lerne gern dazu.

Hier mal ein Beispielformular für Xajax:
test_xajax_dropdown.zip

Jadawin · 30. August 2011 21:39

Guten Abend.

Vielen Dank für die Beiträge und euer Input. Von Xajax würde ich gerne die Finger lassen, da ich mich damit überhaupt nicht auskenne.
Eigentlich sollte das doch auch so gehen.

NaN deine Idee find ich sehr interessant, aber leider deckt diese Lösung nicht all das was ich gemeint habe ab. Wenn ich das richtig verstanden habe, kann ich ja an sich nicht bestimmen, dass das anzuzeigende Folgefeld a bei Dropdownoption 1 angezeigt und z.B. bei 2 und 3 nicht und Folgefeld b bei 1 und 3 angezeigt und bei 2 nicht und usw...

Ich hab mal mein Formular als Beispielformular auf die dargestellte Problematik gekürzt:
testDynDropDown.zip

Ich schaffe es irgendwie nicht den Wert der Dropdownlisten-Option bei der onchange-Funktion zu übergeben.
Ich habs schon mit

Hier klicken, um den Code zum Kopieren zu markieren

onchange="set_hideShow(this.value);"

bzw.

Hier klicken, um den Code zum Kopieren zu markieren

onchange="set_hideShow(this.options[this.selectedIndex].value);"

bzw.

Hier klicken, um den Code zum Kopieren zu markieren

onchange="set_hideShow(document.formName.dropDownName.options[document.formName.dropDownName.selectedIndex].value)"

versucht, aber solangsam gehn mir die Ideen und Ansätze aus, die ich versuchen könnte.

BTW sry dass ich bisher den CODE-Tag vergessen habe.

Beitrag geändert von Jadawin (30. August 2011 21:40)

NaN · 30. August 2011 21:44

Hm. Ja, stimmt, meine Idee klappt nur bei "Entweder/Oder".
Wenn man mehrere Optionen hat, die sich auf dieselben Felder auswirken (bzw. umgekehrt), kommt man damit nicht weit.

NaN · 31. August 2011 22:08

Ha! Und ob das geht! big_smile

Da schau her: testDynDropDown.zip

Das Prinzip ist fast das gleiche:

Dropdown bekommt ID.
Felder bekommen als Klasse diese ID + alle Werte die dieses Feld einblenden sollen.
Bsp.: "dropdown value_1 value_3"

Das Javascript sieht dann so aus:

Hier klicken, um den Code zum Kopieren zu markieren

function toggleFormElm(elm) {
    var options2toggle = document.getElementsByClassName(elm.id);
    for(var i = 0; i < options2toggle.length; i++) {
        options2toggle[i].style.display = (elm.value != '' && options2toggle[i].className.indexOf('value_' + elm.value) >= 0 ? 'block' : 'none');
    }
}

Jadawin · 31. August 2011 22:26

NaN, ich könnte dich gerade so was von hochleben lassen!!!
Ich war nach 2 Tagen an diesem Problem sitzend so was von frustriert.
Vielen,vielen Dank.
Geniale Idee. Muss man so sagen!

NaN · 31. August 2011 01:07

Nur für den Fall, hier ist das Formular nochmal für Xajax: testDynDropDown_xajax.zip
Allerdings ohne Tabelle. Das war mir jetzt zu kompliziert. Aber um das Prinzip zu verstehen, sollte es ausreichen.

brandy · 08. Mai 2012 07:08

Ok schon klar - ich hab diese zwei Varianten vermischt!
Vielen Dank fürs Klarstellen...

brandy · 08. Mai 2012 08:07

Kann man auch Abhängigkeiten erstellen - im Detail meine ich wenn ein Textfeld leer bleibt, dass ein anderes ausgegraut ist. Bzw. wenn im ersten was steht, dass zweite zur Eingabe bereit ist?

NaN · 08. Mai 2012 17:49

So detailiert habe ich mich damit nun auch noch nicht auseinandergesetzt. Aber prinzipiell müsstest Du mit der Methode (CSS IDs und Klassen) alles ansteuern können was Du willst. Was dann passieren soll, müsstest Du allerdings selbst in der Javascriptfunktion definieren.

Um es nochmal auf den Punkt zu bringen, die Idee ist folgende:
Jedes Feld, das irgendetwas machen soll, bekommt eine ID und über die Feldeinstellungen im Formbuilder eine Funktion zugewiesen. Wann diese Funktion ausgelöst wird und was diese macht, ist Dir überlassen.
Das Beispiel hier blendet beim onchange-Event nur Felder ein bzw. aus in Abhängigkeit vom Wert des auslösenden Feldes. Diese Funktion kann aber auch beim onkeyup-Event ausgelöst werden (wie es bei Deinem Textfeld vermutlich besser wäre) und etwas völlig anderes machen. Das musst Du im Formbuilder für das jeweilige Feld angeben bzw. in dieser Funktion selbst definieren.

Und alle Felder, die von dieser Funktion betroffen sein sollen, bekommen als Klasse die ID des auslösenden Feldes. Du kannst so auch Verschachtelungen einbauen, in dem Du diesen Feldern auch wiederum IDs und Funktionen gibst. Z.B. blendet ein Dropdown bei Wert Nr.3 ein Textfeld ein. Dieses blendet bei Eingabe von Inhalt ein weiteres Textfeld ein etc.

Sollen diese Felder nur dann betroffen sein, wenn das auslösende Feld einen bestimmten Wert hat, dann kann man diesen Wert ebenfalls als Klasse für diese Felder verwenden. Ist bei komplexen Werten blöd, aber irgendwie muss das Javascript ja den ausgewählten Wert auf das Feld beziehen können.

In Deinem Falle geht es aber nun darum, ob ein auslösendes Feld irgendeinen Wert beinhaltet und es soll etwas ganz spezielles gemacht werden. Wenn Du es differenzierter haben willst, musst Du natürlich auch differenzierter vorgehen und Dir differenziertere Funktionen schreiben.

Beim groben Rumpf der Funktionen kann ich Dir behilflich sein. Aber alles andere musst Du dann von Fall zu Fall selbst entscheiden. Ich kenne Dein Formular nicht oder was Du damit genau vorhast - will ich auch nicht wink

Hier mal eine Funktion auf der Du aufbauen kannst:

Hier klicken, um den Code zum Kopieren zu markieren

function toggleFormElms() {
    
    var elm, callBack, args1, args2 = null;
    
    for(var i in arguments) {
        var type = typeof arguments[i];
        switch(type) {
            case 'function':
                callBack = arguments[i];
                break;
            case 'object':
                if(arguments[i].constructor.toString().search(/\object HTML.+Element/)>-1)
                    elm = arguments[i];
                else if(!args1)
                    args1 = arguments[i];
                else if(!args2)
                    args2 = arguments[i];
                break;
            default:
                break;
        }
    }
    
    if(!elm)
        return false;
    
    // get all form elements that might be affected
    var formElms = document.getElementsByClassName(elm.id);
    
    for(var i in formElms) {
        
        var hasValueClass = formElms[i].className.indexOf('value_' + elm.value) >= 0,
            args          = (hasValueClass && elm.value != '') || (!hasValueClass && elm.value == '') ? args1 : args2;
        if(args) {
            for(var j in formElms[i]) {
                var attrType = typeof formElms[i][j];
                
                if(args[j]) {
                    var argType = typeof args[j];
                    if(argType == attrType) {
                        if(argType == 'object') {
                            for(var n in args[j]) {
                                if(typeof formElms[i][j][n] == typeof args[j][n])
                                    formElms[i][j][n] = args[j][n];
                            }
                        }
                        else
                            formElms[i][j] = args[j];
                    }
                }
            }
        }
        if(callBack)
            callBack(elm, formElms[i], args1, args2);
        
        return false;
    }
}

Die Funktion erwartet bis zu vier Argumente. Das auslösende Formularelement (Pflicht!), zwei Objekte mit Attributen, die geändert werden sollen (optional) und eine CallBack-Funktion, die dann etwas ganz spezielles machen kann (optional).

Das erste Objekt beinhaltet die Attribute, die geändert werden sollen, wenn der Wert des auslösenden Elements in der Klasse vorkommt (die Klasse immer noch mit Präfix "value_" also "value_[wert]"). Analog dazu enthält das zweite Objekt die Attribute, die geändert werden sollen, wenn der Wert nicht in der Klasse vorkommt.

Also z.B.

Hier klicken, um den Code zum Kopieren zu markieren

<formularElement onchange="toggleFormElms(this, {style:{display:'none'}}, {style:{display:'block'}})" />

Jetzt kannst Du jedem Formularelement sagen was es wann wie mit wem machen soll.

Wenn das nicht ausreicht, nutz die CallBack-Funktion, die dann speziellere Sachen macht, die Du Dir dann selbst zurechtbasteln kannst. Der Callback-Funktion werden als Argumente das auslösende Formularelement, das betreffende Formularelement und die Objekte mit den Attributen übergeben.
Bsp.:

Hier klicken, um den Code zum Kopieren zu markieren

<formularElement onchange="toggleFormElms(this, function(origin, target, args1, args2){ alert('CallBack!'); })" />

oder, wenn es etwas komplexer wird:

Hier klicken, um den Code zum Kopieren zu markieren

<script language="javascript" type="text/javascript">
/* <![CDATA[ */
function toggleFormElmsCallBack(origin, target, args1, args2) {

	alert('CallBack!');

}
/* ]]> */
</script>
<formularElement onchange="toggleFormElms(this, toggleFormElmsCallBack)" />

Edit: Fehler im Script korrigiert

Beitrag geändert von NaN (23. Mai 2012 15:58)

NaN · 23. Mai 2012 16:03

Wer's etwas kompakter mag und lieber mit jQuery arbeitet, hier ist mal eine ganz einfaches Beispiel:

Hier klicken, um den Code zum Kopieren zu markieren

(function($){
    var selectors = ['DropDownId1', 'DropDownId2']; // die Ids der auslösenden felder
    $(document).ready(function(){
        for(var i=0; i<selectors.length; i++) {
            $("#" + selectors[i]).change(function() {
                var v = this.value;
                $('.' + this.id).each(function(){
                    var $this = $(this),
                        a = $this.hasClass('value_' + v),
                        m = (a && v != '');
                    if(m) {
                        $this.find('input').removeAttr('disabled');
                        $this.slideDown();
                    }
                    else {
                        $this.slideUp();
                        $this.find('input').attr('disabled', 'disabled');
                    }
                });
            });
        }
    });
})(jQuery);

bd0 · 27. September 2012 18:45

Hallo,

ich versuche mich gerade auch an ein einem dynamischen Formular (mit Formbuilder) und habe dabei auf dieses Script zurückgegriffen, was prinzipiell gut funktioniert.

NaN schrieb:

Ha! Und ob das geht!
Da schau her: testDynDropDown.zip
Das Prinzip ist fast das gleiche:
Dropdown bekommt ID.
Felder bekommen als Klasse diese ID + alle Werte die dieses Feld einblenden sollen.
Bsp.: "dropdown value_1 value_3"
Das Javascript sieht dann so aus:
Hier klicken, um den Code zum Kopieren zu markieren
function toggleFormElm(elm) {
    var options2toggle = document.getElementsByClassName(elm.id);
    for(var i = 0; i < options2toggle.length; i++) {
        options2toggle[i].style.display = (elm.value != '' && options2toggle[i].className.indexOf('value_' + elm.value) >= 0 ? 'block' : 'none');
    }
}

Mir ist allerdings ein kleiner Bug aufgefallen. Wenn ich in der Dropdownliste 11 Elemente habe unterscheidet das Script offenbar nicht zwischen 1, 10 und 11.
Demnach werden beim Auswählen von 1 aus der Dropdownliste ausserdem auch die Elemente 10 und die 11 angezeigt obwohl für das entsprechend anzuzeigende Feld nur value_1 definiert ist bzw bei Element 10 und 11 jeweils nur value_10 und value_11. Beim anwählen von Element 10 und 11 funktioniert es, Element 1 wird nicht fälschlich angezeigt.

Leider bin ich mit Javascript so wenig vertraut dass ich den Fehler im Script nicht finden kann, für einen Profi sicher kein Problem. Wäre toll wenn es dafür ne Lösung gäbe.

Gibt es ausserdem eine Möglichkeit beim Start alle Formularelemente auszublenden ausser der Dropdownliste die dann die weiter Anzeige steuert? Im Moment wird am Anfang erstmal alles angezeigt, bis man mit der Dropdownliste die Auswahl einschränkt. Das sieht erstmal recht chaotisch aus da es ein recht umfangreiches Formular wird.

Für Hilfe wäre ich sehr dankbar.

NaN · 27. September 2012 21:40

Das Problem ist recht einfach zu erklären:
Das Javascript arbeitet mit der Funktion indexOf('value_' + elm.value)
Das bedeutet, dass nach "value_[Ziffer]" gesucht wird.
"value_1" steckt leider auch in "value_10", "value_11" oder "value_12", "value_1010101010..." etc.
Anstelle von indexOf() könnte man den Klassennamen auch anhand der Leerzeichen aufsplitten, dann alle Klassennamen durchgehen und einzeln prüfen:

Hier klicken, um den Code zum Kopieren zu markieren

function toggleFormElm(elm) {
   var options2toggle = document.getElementsByClassName(elm.id);
   for(var i = 0; i < options2toggle.length; i++) {
      var classNames  = options2toggle[i].className.split(" "),
         currDisplay = options2toggle[i].style.display;
      for(var j = 0; j < classNames.length; j++) {
         var valueClass = 'value_' + elm.value;
         if(elm.value != '' && classNames[j] == valueClass) {
            currDisplay = 'block';
            break;
         } else if(elm.value != '' && classNames[j] != valueClass) {
            currDisplay = 'none';
         }
      }
      options2toggle[i].style.display = currDisplay;
   }
}

(hab's noch nicht getestet)

Edit 1 (28.09.2012): Funktion geändert
Edit 2 (28.09.2012): Scheint zu funktionieren

Beitrag geändert von NaN (28. September 2012 15:44)

bd0 · 28. September 2012 15:07

Hallo NAN,

danke für den Lösungsansatz.
Jetzt verhält es sich aber irgendwie chaotisch, vielleicht liegts am Aufbau meines Formulars?

1. Dropdown mit 11 Einträgen (value 1-11)

2. 11 Drowdownmenus jeweils mit "dropdown value_XX" versehen die mit den Dropdowneinträgen aus 1. korrespondieren.

3. diverse Textfelder, Kontrollkästchen und einige Fieldset die ich auch entsprechend mit dropdown value_XX, nach Bedarf versehen habe, um die Anzeige entsprechend der Auswahl mit Dropdown 1 zu steuern.
Die Ebene 1 steuert also alles andere, blendet die nicht benötigten Dropdownmenus aus und schaltet Kontrollkästchen, Textfelder und Fieldsets an und aus.

Das Problem dass dropdown 1, 10 und 11 (aus Ebene 2.) angezeigt wurden wenn 1 gewählt wurde ist gelöst, die Darstellung der Elemente unter 3. (Textfelder, Kontrollkästchen und Fieldsets) verhält sich nun aber nicht mehr nachvollziehbar. Obwohl "dropdown value_XX" den jeweiligen Elementen entsprechend der gewünschten Sichtbarkeit zugewiesen sind, werden manche angezeigt und andere nicht. Absolut rätselhaft. Vielleicht habe ich dich aber auch nicht richtig verstanden. Muss die Sichtbarkeit nun anders definiert werden? Wenn ja, wie?

Zur Not muss ich mich eben auf 9 Dropdownmenus auf Ebene 2 beschränken. Bis zur einführung von 10 und 11 lief es ja wie gewünscht.

NaN · 28. September 2012 15:46

Ähm, ja, sorry, die Funktion war Mist. Hab mich damit schon eine Weile nicht mehr beschäftigt.
Hab sie gerade nochmal im vorhergehenden Post geändert.
(Allerdings wieder nicht getestet.)

bd0 · 28. September 2012 16:09

Super! 1000 Dank.
Jetzt funktioniert es absolut einwandfrei!
Nochmals 1000 Dank!

mas_B · 12. November 2012 11:27

Hallo NaN

Gibt es eine Möglichkeit wenn ich die Seite lade, dass mir per default nichts angezeigt wird. Sozusagen die toggleformelm Funktion vor dem Page load augerufen wird?

Vielen Dank!

NaN · 12. November 2012 16:35

Naja, du könntest per CSS einfach alle betreffenden Elemente im Formular ausblenden. Dazu braucht's doch keine Toggle-Funktion. Oder habe ich Dich da falsch verstanden?

Forum für CMS/made simple

#1 29. August 2011 14:19

[GELÖST] Formbuilder - Dropdownoptionsauswahl bedingt dyn Verstecken v. Feldern

#2 30. August 2011 12:44

Re: [GELÖST] Formbuilder - Dropdownoptionsauswahl bedingt dyn Verstecken v. Feldern

#3 30. August 2011 13:54

Re: [GELÖST] Formbuilder - Dropdownoptionsauswahl bedingt dyn Verstecken v. Feldern

#4 30. August 2011 15:22

Re: [GELÖST] Formbuilder - Dropdownoptionsauswahl bedingt dyn Verstecken v. Feldern

#5 30. August 2011 15:37

Re: [GELÖST] Formbuilder - Dropdownoptionsauswahl bedingt dyn Verstecken v. Feldern

#6 30. August 2011 15:59

Re: [GELÖST] Formbuilder - Dropdownoptionsauswahl bedingt dyn Verstecken v. Feldern

#7 30. August 2011 16:08

Re: [GELÖST] Formbuilder - Dropdownoptionsauswahl bedingt dyn Verstecken v. Feldern

#8 30. August 2011 17:07

Re: [GELÖST] Formbuilder - Dropdownoptionsauswahl bedingt dyn Verstecken v. Feldern

#9 30. August 2011 20:47

Re: [GELÖST] Formbuilder - Dropdownoptionsauswahl bedingt dyn Verstecken v. Feldern

#10 30. August 2011 21:39

Re: [GELÖST] Formbuilder - Dropdownoptionsauswahl bedingt dyn Verstecken v. Feldern

#11 30. August 2011 21:44

Re: [GELÖST] Formbuilder - Dropdownoptionsauswahl bedingt dyn Verstecken v. Feldern

#12 31. August 2011 22:08

Re: [GELÖST] Formbuilder - Dropdownoptionsauswahl bedingt dyn Verstecken v. Feldern

#13 31. August 2011 22:26

Re: [GELÖST] Formbuilder - Dropdownoptionsauswahl bedingt dyn Verstecken v. Feldern

#14 31. August 2011 01:07

Re: [GELÖST] Formbuilder - Dropdownoptionsauswahl bedingt dyn Verstecken v. Feldern

#15 08. Mai 2012 07:08

Re: [GELÖST] Formbuilder - Dropdownoptionsauswahl bedingt dyn Verstecken v. Feldern

#16 08. Mai 2012 08:07

Re: [GELÖST] Formbuilder - Dropdownoptionsauswahl bedingt dyn Verstecken v. Feldern

#17 08. Mai 2012 17:49

Re: [GELÖST] Formbuilder - Dropdownoptionsauswahl bedingt dyn Verstecken v. Feldern

#18 23. Mai 2012 16:03

Re: [GELÖST] Formbuilder - Dropdownoptionsauswahl bedingt dyn Verstecken v. Feldern

#19 27. September 2012 18:45

Re: [GELÖST] Formbuilder - Dropdownoptionsauswahl bedingt dyn Verstecken v. Feldern

#20 27. September 2012 21:40

Re: [GELÖST] Formbuilder - Dropdownoptionsauswahl bedingt dyn Verstecken v. Feldern

#21 28. September 2012 15:07

Re: [GELÖST] Formbuilder - Dropdownoptionsauswahl bedingt dyn Verstecken v. Feldern

#22 28. September 2012 15:46

Re: [GELÖST] Formbuilder - Dropdownoptionsauswahl bedingt dyn Verstecken v. Feldern

#23 28. September 2012 16:09

Re: [GELÖST] Formbuilder - Dropdownoptionsauswahl bedingt dyn Verstecken v. Feldern

#24 12. November 2012 11:27

Re: [GELÖST] Formbuilder - Dropdownoptionsauswahl bedingt dyn Verstecken v. Feldern

#25 12. November 2012 16:35

Re: [GELÖST] Formbuilder - Dropdownoptionsauswahl bedingt dyn Verstecken v. Feldern

Fußzeile des Forums