Flexbox(en) einzel ansprechen und füllen

[Rolf B]

Hallo Jochbart,

Kurzfassung der Antwort: 1. Ja, 2. Ja, 3: Hä?

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.

Wenn deine Seite foo.html heißt, kannst Du sie mit foo.html#box3 aufrufen, der Browser positioniert die Anzeige dann so, dass die Box mit id='box3' sichtbar ist.

Ein seiteninterner Link wie <a href='#box3'>Dritte Box</a> ist für interne Navigation verwendbar.

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>

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];
}

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);
}

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.

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.

Rolf