heute mal JavaScript mit DOM

[Sholvar]

Ich möchte mit JS ein Formular manipulieren. Wenn man aus einer radio-button liste ein element auswählt, soll sich je nach Auswahl eine andere Fortsetzung des Formulars ergeben.
Das mit appendChild klappt schon ganz gut und ich weiss auch, dass man die Childs einfach ersetzen kann, wenn man was anderes auswählt. Aber wie kann ich mein if formulieren um zu entscheiden, ob schon ein child da ist was ersetzt werden muss, oder ob noch keins da is?
Folgeelement und radiobuttons sind auf dem selben Level der Hierarchie.

 

[cart]

Warum blendest du nicht einfach über CSS Attribute Sachen ein und aus? Dann sparst du dir das Ersetzen kompletter Teile.

 

[Picard]

jo wie cart sagte

.display = none | inline | ...

oder halt komplett ersetzen via

.innerHTML = code;

siehe dazu selfhtml/google

wenn du die daten aus ner db liest lohnt sich dann wohl der einsatz von ajax (xml/php/js verknüpfen)

 

[Sholvar]

ok. ich muss zugeben, ich versteh mal wieder nur bahnhof.
Hier also einfach mal mein Übungsbeispiel:

so. angezeigt werden 3 checkboxen und wenn ich auf eine drücke soll darunter je nachdem entweder eine Liste von Spielstätten oder eine Liste von Stadien erscheinen. Und wenn ich mehrmals drücke soll halt nicht gleich ein zweites auswahl menü erscheinen sondern je nach situation halt das andere.

Wenn ihr so lieb wärt und mir anhand des codes erklären könntet, was ihr meint, wäre das echt nett.

<script type="text/javascript">
  function gethouses(){
    var form = document.getElementById("formular");
    var select = document.createElement("select");
    var option;
    var text;
    var button;
    var tag;
    text = document.createTextNode("Spielstätten: ");
    form.appendChild(text);
    select.setAttribute("name", "locations[]");
    select.setAttribute("size","1");

    option = document.createElement("option");
    option.setAttribute("value","1");
    text = document.createTextNode("Haus 1");
    option.appendChild(text);
    select.appendChild(option);

    option = document.createElement("option");
    option.setAttribute("value","2");
    text = document.createTextNode("Haus 2");
    option.appendChild(text);
    select.appendChild(option);

    form.appendChild(select);
    tag = document.createElement("p");
    tag.setAttribute("id","Spielstaetten");
    text = document.createTextNode("ausgewählte Spielstätten");
    tag.appendChild(text);
    form.appendChild(tag);
    tag = document.createElement("input");
    tag.setAttribute("type", "button");
    tag.setAttribute("id", "button");
   
  }
  function getstadion(){
     
  }
  
  
</script>


<form action="http://meine-seite.de" method="post" id="formular"> 
  <span class="radiobuttons">
    <input type="radio" name="topic" value="theater" onclick="gethouses();">Theater<br>
    <input type="radio" name="topic" value="kino" onclick="gethouses()">Kino<br>
    <input type="radio" name="topic" value="Fuba" onclick="getstadion()">Fussball<br>
  </span><div class="dropbox">
  </div>
</form>

//schade dass es keinen tag für html code gibt oder ich zu doof bin ihn zu benutzen.

 

[cart]

Du machst ein Formular mit _allen_ Eingabemöglichkeiten und weist diesen ids zu. Wenn dann eine Checkbox markiert wird, kannst du über CSS die Sachen mit Hilfe ihrer IDs über CSS sichtbar oder unsichtbar machen. Es werden dann also nur die Sachen angezeigt, die du bestimmst.