Flexbox(en) einzel ansprechen und füllen

[Jochbart]

Hallo Rolf,

Zunächst mal ist es dem Javascript piepegal, ob deine Boxen flex, float oder flummi sind. Es sind Container-Elemente im DOM, und damit kannst Du sie beispielsweise mit document.getElementById('box1'); finden. Oder box2, oder box3, oder oder.

Verstehe ich das richtig, die einzelnen Boxen bekommen automatisch die id zugewiesen sowie sie in der Reihenfolge sind? Also erste Flexbox = box1? Oder muss ich diese in deinem Beispiel erst noch zuweisen?

Es kann allerdings suboptimal sein, die Formular-Boxen in Javascript mit ihrer ID anzusprechen. Vermutlich wirst Du eine Seitenstruktur haben, die grob sowas enthält:

<main>
<section id='chapter1' class='formChapter'><!-- formularfelder --></section>
<section id='chapter2' class='formChapter'><!-- formularfelder --></section>
<section id='chapter3' class='formChapter'><!-- formularfelder --></section>
</main>

ok werde ich mir mal anschauen!

Auf die formChapter class kannst Du übrigens verzichten, wenn der Chapter-Container nur sections enthält, die Formularkapitel sind.

In JavaScript kannst Du nun entweder mit der ID oder mit CSS Selektoren die entsprechenden Kapitel finden:

// erwartet Kapitelnummer beginnend mit 1
function findChapter(i) {
   // entweder  
   return document.getElementById('chapter'+i);
   // oder
   return document.querySelectorAll('main section')[i-1];
   // oder
   return document.querySelectorAll('main .formChapter')[i-1];
}

Worin liegt der Unterschied dieser 3 returns?

In dem so gefundenen Formularkapitel kannst Du nun schalten und walten wie Du es brauchst.

Entsprechend gibt es auch DOM Methoden, um eine Section aus ihrem Container-Element zu entfernen. Eine heißt remove() - ist aber relativ neu und wird vom Internet Explorer nicht unterstützt. Kompatibler ist es, zum parentNode zu gehen und von dort aus das Kind zu löschen.

// erwartet DOM-Element zum Kapitel (Rückgabe von findChapter)
function removeChapter(chap) {
   if (!chap) return;

   // entweder
   chap.remove();
   // oder
   if (chap.parentNode)
      chap.parentNode.removeChild(chap);
}

ok von remove habe ich noch nichts gehört. Werde ich mir mal anschauen!

Hinzufügen kann man auch, dazu musst Du die Section über document.createElement anlegen und ihrem innerHTML Attribut einen String mit dem HTML des Formularkapitels zuweisen. Im Wiki steht was dazu.

Sieht auf jeden Fall schon brauchbar aus, hoffe das hilft mir weiter.

Was Du mit der "Werteweitergabe vom Formular auf die HTML Seite" meinst, verstehe ich nicht. Der HTML-Seite kannst Du nichts weitergeben, sie wird vom Browser angezeigt und enthält deine Formularteile. Und du hast gesagt, dass dein Formular "ohne Internet" - also offline arbeiten soll. Also - wo willst Du da etwas speichern? Ohne Internet hast Du keinen Server. Du kannst Dinge im localStorage des Browsers ablegen, aber ich glaube, du hast anderes im Sinn.

Naja ich stelle mir das so vor: Im Endeffekt habe ich 2 Dokumente, meine HTML Seite in der nur das horizontale Navigationsmenü oben fest definiert ist. Darunter füge ich Flexboxen ein und verknüpfe diese jeweils mit einer der Menüpunkte um dort hin zu springen.

Als zweites Dokument soll ein (längenveränderbares) Formular sein. Ein Benutzer kann dort alles in Textfelder (und upload) eingeben. Von der Überschrift, bis hin zu Bildern und Videos. Die "Kapitel" des Formulars sollen immer gleich ausschauen um damit jeweils eine Flexbox im gleichen Schema zu füllen. Die Daten wie Bilder müssen ja trotzdem Platz im HTML Code finden um diese auf der Seite anzuzeigen. Deswegen meinte ich damit sie werden von dem Formular zum HTML Dokument geschickt und anschließend dort angezeigt. Klar müsste man lediglich den Pfad des Bildes oder Videos im HTML Dokument angeben, doch wie realisiere ich das über das Formular (Der Benutzer hat keine HTML Kenntnisse).

Danke für deine Hilfe und Bemühung bis jetzt, wird mich auf jeden Fall ein Stück weiter bringen. Und falls noch mehr Vorschläge kommen, wäre ich dir sehr dankbar.

Gruß Jochbart