[GELÖST] Formular: input-Element in div ansprechen

[nordi]

Ich generiere mir ein Formular via PHP, welches hierarchisch strukturiert Eingaben via Checkboxen erlaubt. Eine Gruppe ist jeweils via <div> definiert. Eine javascript-Funktion soll auf die einzelnen input-Elemente zugreifen können.

<form id='pflanzen' accept-charset='utf-8'> 
...
<label><input id="Bohnen" onclick='fillHier("1", "Asia Mix", "Bohnen", checked)'  class="einrueck1" type="checkbox" value="false" name="Bohnen" value="Bohnen">Bohnen</label><div class='newLine'></div>
<div id='Bohnengr'>
  <label><input id="Buschbohnen" onclick='fillHier("2", "Bohnen", "Buschbohnen", checked)'  class="einrueck2" type="checkbox" value="false" name="Buschbohnen" value="Buschbohnen">Buschbohnen</label><div class='newLine'></div>
  <label><input id="Stangenbohnen" onclick='fillHier("2", "Buschbohnen", "Stangenbohnen", checked)'  class="einrueck2" type="checkbox" value="false" name="Stangenbohnen" value="Stangenbohnen">Stangenbohnen</label><div class='newLine'></div>
</div>         
...

Script:

...
    var item = document.getElementById("Bohnengr");
    var elt ;
    elt = document.forms['pflanzen'].div["Bohnengr"].elements[0];       o d e r
    elt = document.getElementById("Bohnengr").elements[0];              o d e r
    elt = item.elements[0]
    elt.checked = false;
...

Hinweis: Ist Teil einer Funktion. Der Pflanzenname "Bohnen" kommt via Variable herein.

Er findet das <div> der Gruppe. Ich kann aber nicht mit elements[0], elements[1] auf die einzelnen Elemente, d. h. <input...> darauf zugreifen. Sowohl wenn ich die erste Form als auch die 2. oder 3. Zeile benutze. Bei der Konsole von Firefox steigt er aus dem Script vorzeitig aus...

Mit innerHTML bekomme ich nur die ursprüngliche Ausgangslage, nicht jedoch durch den User die veränderte Situation. Wäre auch eine nicht so elegante Lösung.

Vorschläge?

lg nordi

 

[zirzofer]

Mit dem Objekt elements, das in der JavaScript-Objekthierarchie unterhalb des forms-Objekts liegt, haben Sie Zugriff auf Elemente eines Formulars.
https://wiki.selfhtml.org/wiki/JavaScript/DOM/Document/forms/elements

Das Element mit der id "BohnenGr" ist aber ein div.
--> https://developer.mozilla.org/de/docs/Web/API/ParentNode/children
--> https://developer.mozilla.org/de/docs/Web/API/Node/childNodes

PS: <div class='newLine'></div> erscheint mir absolut unelegant
PPS: verwende keine inline-eventlistener, sondern setze diese mit javascript! https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
PPPS: für code sind die CODE-Tags vorgesehen, kein zitat

- - - Aktualisiert - - -

PPPPS: was soll das ganze mit node.js zu tun haben?

 

[kkapsner]

Ich würde ja mit https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName oder https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll arbeiten - also in deinem Fall:

var elements = item.getElementsbyTagName("input");

oder

var elements = item.querySelectorAll("input, textarea, select");

- je nachdem, ob du nur <input>s oder auch andere Formularelemente hast.

PS: Verschoben.

 

[nordi]

Danke für die Antworten. Ich hole mir jetzt innerhalb der <div>-Gruppe die

var nodelist = knoten.childNodes;

und gehe dann alle Nodes der Nodeliste durch, welche ein input-Element darstellen und verändere checked.

 

[mikdoe]

ist die fragestellung damit gelöst?

 

[zirzofer]

und gehe dann alle Nodes der Nodeliste durch, welche ein input-Element darstellen

da ist allerdings kkapsners lösung einfacher und effizienter - warum nicht einfach:

var elements = item.getElementsbyTagName("input");

PS:

für code sind die CODE-Tags vorgesehen, kein zitat

 

[nordi]

Ja, ist gelöst.