komplexes Formular; Felder ein-/ausblenden

H

HCH

Grünschnabel
Hallo zusammen.

Als Beginner auf dem Gebiet PHP/Java habe ich mir folgendes Projekt vorgenommen, wobei ich um Unterstützung bitte.

Ein verschachteltes Formular soll Auswahlfelder bereitstellen und am Schluß eine bedingte Antwort ausgeben.
Also Auswahlmenü 1
bedingt Auswahlmenü 2
bedingt Antwort.

So habe ich es bisher programmiert bekommen (Ausschnitt):

Javascript: 
<script type="text/javascript">

    function einblenden(){

        var kategorie = document.getElementById('kategorie').value;
        if(kategorie == 100) document.getElementById('100').style.display = "block";
        else document.getElementById('100').style.display = "none";
        if(kategorie == 110) document.getElementById('110').style.display = "block";
        else document.getElementById('110').style.display = "none";
        if(kategorie == 120) document.getElementById('120').style.display = "block";
        else document.getElementById('120').style.display = "none";
    
        var ergebnis100 = document.getElementById("100").value;
        if(kategorie == 100 && ergebnis100 == 101) document.getElementById('101').style.display = "block";
        else document.getElementById('101').style.display = "none";
     
        var ergebnis110 = document.getElementById("110").value;
        if(kategorie == 110 && ergebnis110 == 111) document.getElementById('111').style.display = "block";
        else document.getElementById('111').style.display = "none";
    }
</script>
</head>

<body onload="einblenden()">
<?php $_POST[]; ?>
<form>
    <select onchange="einblenden()" id="kategorie" name="Kategorie" class="form" style="width: 500px; height: 40px; position: static; margin: 5px; display: block;">
    <option value="100">Kopf</option>
    <option value="110">Erkältung</option>
    </select>
       
    <select id="100" name="Symptome" class="form" onchange="einblenden()" style="width: 500px; height: 40px; position: static; margin: 5px; display:none">
    <option value="101">Schnarchen</option>
    <option value="102">Gedächtnisschwäche</option>
    <option value="103">Kopfschmerzen</option>
    </select>
       
    <select id="110" name="Symptome" class="form" onchange="einblenden()" style="width: 500px; height: 40px; position: static; margin: 5px; display:none ">
    <option value="111">Bronchitis</option>
    <option value="112">Grippaler Infekt</option>
   </select>
    
</select>   
        <div id="101" name="Ergebnis" class="form" style="display: none;">
        Unsere Empfehlung:  101
        </div>
        <div id="111" name="Ergebnis" class="form" style="display: none;">
        Unsere Empfehlung: 111
        </div>
</form>


Der Inhalt der Auswahlfelder und Ergebnisse (Antworten) ist um ein vielfaches länger als der Codeausschnitt!

Anstatt jedes Mal die Bedingungen als var xxx mit if else zu stapeln, wäre es interessant, ob man die IDs nicht alle auslesen kann und dann miteinandervergleichen.
Meine Idee war, sowas wie eine Variable mit "document.getElementByName('Symptome').id;" und diese dann mit den Kategorien zu vergleichen, um damit dann das Ergebnis anzuzeigen.
Der eben genannte Befehl existiert ja so nicht. Habs auf verschiedene Arten versucht, aber nicht hinbekommen.

Ach ja. Das soll als Formular bleiben, da damit nur der Bereich eingegrenzt werden soll. Es folgt dann ein Standardformular, in dem weitere Angaben gemacht werden sollen. Alles zusammen soll dann übermittelt werden.

Kann jemand helfen?
Vielen Dank.
 
Also ich habe das mal neu gemacht.
Allerdings habe ich noch einen kleinen Bug drin. Vielleicht findest du ihn ja selbst. Ansonsten gucke ich morgen noch mal:
Javascript: 
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
var kategorie=new Array (2);
kategorie[0]="Kopf2";
kategorie[1]="Erkältung";
var symptome=new Array(2);
symptome[0]=new Array("Schnarchen","Gedächtnisschwäche","Kopfschmerzen");
symptome[1]=new Array("Bronchitis","Grippaler Infekt");
    function addOption(item,s1)
    {
        var option = document.createElement("option");
        option.value = item;
        option.text = item;
        s1.appendChild(option);
    }
    function setup()
    {
        var k1=createSelect("Kategorie",kategorie);
        k1.onchange=function(){changeOptions();}
        console.log(k1.options[k1.selectedIndex].value);
        console.log(symptome[k1.selectedIndex]);
        var s1=createSelect("Symptome",symptome[0]);
    }
    function createSelect(sName,options)
    {
        var s1=document.createElement("SELECT");
        s1.id=sName;
        var parent=document.getElementById("Auswahl");
        parent.append(s1);
        for(i =0;i<options.length;i++){
            addOption(options[i],s1);
        }
        return s1;       
    }
    function changeOptions()
    {
        var k1=document.getElementById("Kategorie");
        var sName=k1.options[k1.selectedIndex].value
        var s1= document.getElementById("Symptome");
        var options=symptome[k1.selectedIndex];
        for(var i =0;i<s1.options.length;i++)
        {
            s1.remove(i);
        }
        for(i =0;i<options.length;i++){
            addOption(options[i],s1);
        }
    }
window.onload=function(){
    setup();
}
</script>
</head>
<body>
<form id="Auswahl">
</form>
</body>
</html>
Ich hoffe, du kommst damit weiter.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück