Javascript-Array übermitteln

[Alexander (HH)]

Moin Moin!

Du solltest nicht über getElementByID() arbeiten, damit schließt Du unnötig ältere Browser aus. document.forms["Formularname"].elements["Elementname"] ist der kompatiblere Weg.

Das value-Attribut der Elemente ist immer ein String, etwas anderes zuzuweisen wird zu unerwünschten Ergebnissen führen.

Wenn Du den Javascript-Firlefanz weitgehend sein läßt und stattdessen Dein Design überarbeitest, brauchst Du dich darum gar nicht zu künnern. Du definierst pro Bild eine Checkbox, deren Value jeweils die Bild-ID ist. Beim Absenden des Formulars wird jede angekreuzte Checkbox separat mit ihrem Namen und Value übertragen:

<form action="zipit.cgi" method="get" name="auswahl">
  <input type="checkbox" name="images" value="14" checked><img src="14.jpg" alt=""><br>
  <input type="checkbox" name="images" value="15"><img src="15.jpg" alt=""><br>
  <input type="checkbox" name="images" value="16" checked><img src="16.jpg" alt=""><br>
  <input type="submit" value="Zippen">
  </form>

Wenn Du dieses Formular ohne Änderungen abschickst, wird auf dem Server die URL zipit.cgi?images=14&images=16 aufgerufen. Du bekommst den images-Parameter also mehrfach, mit Werten für alle angekreuzten Checkboxen. PHP kann damit meines Wissens nur dann umgehen, wenn der Name auf "[]" endet. Andere Systeme haben dieses Problem nicht.

Das ganze "hübsch" zu machen ist die Aufgabe von CSS, nicht Javascript. Du kannst natürlich, sofern Javascript aktiviert ist, die Checkboxen per display:none verschwinden lassen, onclick-Events auf die Bilder an die Checkboxen weiterleiten, und abhängig vom Status der jeweiligen Checkbox das Bild umstylen (z.B. border-color:red vs. border-color:green). Die Grundfunktion bleibt so auch ohne Javascript erhalten.

Wenn Du unbedingt auf einer Javascript-Lösung bestehst, wirst Du ein Array benötigen, in dem Du entweder den "Ausgewählt"-Status jedes einzelnen Bildes (anhand seiner ID) selbst pflegst oder nur ausgewählte Bilder-IDs speicherst und bei jeder Änderung den Wert eines Hidden-Feldes nachziehst. Du brauchst also mindestens einen recht aufwendigen onclick-Handler, der das Array umgräbt. Eine von vielen Code-Zeilen in dem onclick-Handler wird sinngemäß so aussehen, wenn das Array nur IDs ausgewählter Bilder enthält:

document.forms["formularName"].elements["hiddenFieldName"].value=selectedImagesArray.join(",");

Davor muß das Array auf den neuesten Stand gebracht werden.

Die Lösung mit Checkboxen und CSS ist definitiv einfacher.

Alexander