Nummerierung bei dynamischen Formular

[Jochbart]

Guten Abend Rolf,

habe seit gestern bis gerade mit deinem Beitrag noch gespielt bzw. selber versucht es umzugestalten. Manches verstehe ich noch nicht so ganz. Mach es so:

if (hdrValue != null)
   header.innerText = "Arbeitsplatz - " + hdrValue;
else
   header.innerText = "Arbeitsplatz ";

oder mit ?: Operator so:

header.innerText = hdrValue ? ("Arbeitsplatz - " + hdrValue) : "Arbeitsplatz ";

Hab ich verstanden und auch umgesetzt. Danke!

Also im HTML:
<h2>Arbeitsplatz <span></span><button type="button" name="remove">Entfernen</button></h2>

Im CSS:
h2 span:before { content: counter(plaetze); counter-increment: plaetze 1; display:inline; }

Und im JavaScript:
header.innerText = hdrValue ? (" - " + hdrValue) : "";

Auch verstanden und angewendet, sogar mit if else. :P

#Die Bilderliste.

• kein onchange Attribut am Dropdown!.…
• die Eventhandler-Funktion setzt Du, so wie die anderen Handlerfunktionen auch, IN die Handlerfunktion für DOMContentLoaded hinein.

Hoffe ich habe es richtig umgesetzt.

• statt einem div für die Bilderupload-Liste (klingeling!) wäre eine Liste angemessener. Also ein ul als Container und für jedes Bild ein li. ul und li werden so gestyled dass sie keinen margin, kein padding und keinen list-style haben. Die li enthalten dann jeweils ein Upload-Feld. Dem ul gibst Du, um es identifizieren zu können, eine class (weil Du vermutlich die gleich Nummer noch mit Video-Uploads planst). Mein Vorschlag: class="bilder".

Richtig, genau so wollte ich bei den Videos auch vorgehen. Ich habe es mal versucht auf meine Art und Weise zu machen, jedoch verstehe ich nicht warum es nicht mit getElementByClassName klappt.

• das von Dir konstruierte HTML passt nicht zu dem vorhandenen Bild-Upload. Du hast das label Element mit darin befindlichem input type="file" aus meinem Fiddle übernommen. Was Du in deinen Container einfügst, ist einfach nur ein input-Element. Deswegen greift das CSS nicht. Das CSS geht von der Struktur <label><span></span><input type="file" ...></label> aus. Da das CSS das label auf display:block setzt, brauchst Du dann auch kein <br> mehr.

Habe ich das input-Element jetzt richtig eingefügt mit dem Typ file?

• du hast ein Dropdown "Anzahl der hochzuladenden Bilder". Dein Eventhandler fügt aber soviele input-Felder hinzu, wie man ausgewählt hat. D.h. wenn ich erst 2, dann 3 und dann 9 auswähle, habe ich am Ende 15 Felder. Ist das Dein Wunsch? Möchtest Du nicht vielleicht lieber einen "noch ein Bild" Button haben?

Nein du hast recht, ich möchte nur dass so viele Uploads erscheinen wie auch ausgewählt also nix mit addieren. Bei mir im Code klappt das soweit auch nur dass ich halt immer noch beim div hänge weil es mit meiner class bzw ul nicht hinhaut.

D.h. hinter die Registrierung des input-Events für das form setzt Du die Registrierung und die Filterung auf den richtigen Elementtyp:

form.addEventListener("change", function(evt) {
   if (evt.target.name == "top10")
      updateBilderUpload(sectionFor(evt.target), evt.target.value);
});

und weiter unten, aber nicht zu weit :), dann die Handler-Funktion. Der Rahmen hat bereits die Section und die Anzahl ermittelt. Hier musst Du nun noch die Liste finden und dich entscheiden, wie Du vorgehen willst. Soll es insgesamt so viele Upload-Elemente geben, wie als "anzahl" übergeben wird? Oder sollen so viele Elemente hinzugefügt werden? Davon hängt ab, was die Funktion tun soll, deswegen schreibe ich hier nur einen Rahmen hin.

   function updateBilderUpload(section, anzahl) {
      var liste = section.querySelector("ul.bilder");

      // Beispiel: Ein neues li mit passendem Inhalt erzeugen
      var newItem = document.createElement("li");
      newItem.innerHtml = "<label><span>Bild:</span><input type='file' name='..'></label>"
   }

Ich bekomme es mit dieser Art und Weise nicht hin, deswegen habe ich es mal als Kommentar hinterlegt. Vielleicht habe ich es auch nicht richtig verstanden und einfach an die falsche Position gesetzt?!

Bevor wir uns über den Inhalt von updateBilderUpload unterhalten - wie soll's denn sein?

ABER ABER ABER: Du gerätst jetzt in Zuordnungsprobleme. Jedes Bild-Uploadelement hat name="bild". Du hast am Server keine Ahnung mehr, welches Bild zu welchem Arbeitsplatz gehört hat. Vor dem Submit musst Du die name-Elemente aller Bilder patchen, so dass die Arbeitsplatznummer im Bild enthalten ist. Das darfst Du auch erst beim submit-Element des form tun, weil es ja vorher sein kann, dass munter Arbeitsplätze hinzugefügt oder entfernt wurden. D.h. du brauchst einen weiteren Eventhandler:

form.addEventListener("submit", function() {
   // Hier die Namen der input-Elemente systematisch neu nummerieren
});

Funktioniert das nicht mit meinem gut gemeinten "bild" + i in der Schleife um die Nummerierung selbst zu gestalten? Ich suche gerade noch nach einem Weg ein System einzuführen nach dem Schema, der Dateiname des Uploads nimmt als Name die Dateiendung an. D.h. wenn ich z.B. ein .jpg hoch lade wird vor dem Namen der Datei JPG-blabla geschoben und abgespeichert. Ist so etwas möglich?

Dieser Handler sollte dann nicht nur die File-Elemente nummerieren, sondern alle. Um über das "wie" zu reden, wäre erstmal die Frage: Welche Sprache verwendest Du am Server?

Zum Thema Server muss ich mich noch schlau machen. Deswegen bin ich für jeden Tipp dankbar wenn es um die Sprache geht. Ist es auch möglich meine Uploads durch abschicken des Formulars in vorher festgelegte Ordner auf der Festplatte zu speichern?

Gruss,

Jochbart

P.S. Achja vor lauter losgeschreibe ja glatt meinen jetzigen Code vergessen: fiddle