Flexbox(en) einzel ansprechen und füllen

[Jochbart]

Hallo liebe Community,

ich hänge gerade an folgendem Problem bzw. eher einer Frage fest:

Ich habe vor, ein Formular in HTML zu erstellen und nur mit Javascript auszulesen da die Webseite ohne Internet bzw. PHP arbeiten soll. So weit, so gut. Meine eig. Problemstellung ist, dass meine erstellte HTML-Webseite ein festes, horizontales Dropdown-Menü aufweisen soll und sich der Inhalt der Seite darunter mit den eingegebenen Daten des Formulars automatisch füllen soll. Die Seite soll im Stil sein, dass im Endeffekt nur dort gescrollt werden kann und das Menü die id's anspricht und bei anklicken einfach zur jeweiligen Überschrift springt.

Zur Realisierung habe ich mir das so vorgestellt, dass ich unter dem Dropdown-Menü Flexboxen einfüge und diese sollen gefüllt werden. Das auszufüllende Formular unterteilt sich hierbei in mehreren "Kapitel", ein Kapitel = eine Flexbox.

1. Frage: Ist es möglich durch id Vergabe an die jeweiligen Flexboxen diese mit JS zu füllen?

2. Frage: Ich weiss nicht wie viel "Kapitel" der User ausfüllen wird, ist es möglich die Anzahl der Flexboxen automatisch zu erhöhen bzw. wenn weniger eingegeben wird zu mindern?

3. Frage: Wie realisiere ich am besten die Werteweitergabe vom Formular zu der HTML-Seite? Da es auch möglich sein soll Bilder und Videos dort hochzuladen, muss es ja mit der Methode POST passieren aber dann?

Ich habe schon mal etwas gelesen das dies mit AJAX und file api möglich wäre, habe aber keinen blassen Schimmer wie man dies umsetzen kann.

Vielen Dank im Voraus!

[at]

Hallo Jochbart,

ich antworte dir mal, obwohl mir sehr unsicher bin, ob ich dich richtig verstanden habe.

1. Frage: Ist es möglich durch id Vergabe an die jeweiligen Flexboxen diese mit JS zu füllen?

Ja, aber gegebenfalls gar nicht nötig. Wenn die Reihenfolge der Formulare der Reihenfolge der Kapitel – in der Baumstruktur deines Dokumentes, nicht zwangsläufig in der sichtbaren Reihenfolge – entspricht, kannst du auch recht einfach anders lösen.

2. Frage: Ich weiss nicht wie viel "Kapitel" der User ausfüllen wird, ist es möglich die Anzahl der Flexboxen automatisch zu erhöhen bzw. wenn weniger eingegeben wird zu mindern?

Sinnvoll ist es wohl, dem Nutzer unter dem letzten Formular eine Schaltfläche zur Verfügung zu stellen, die immer ein weiteres Formular für einen weiteren Kasten hinzufügt. Wenn beim Laden der Seite nur ein Formular vorhanden ist, ist dieses bereits das letzte.

3. Frage: Wie realisiere ich am besten die Werteweitergabe vom Formular zu der HTML-Seite? Da es auch möglich sein soll Bilder und Videos dort hochzuladen, muss es ja mit der Methode POST passieren aber dann?

Ich habe schon mal etwas gelesen das dies mit AJAX und file api möglich wäre, habe aber keinen blassen Schimmer wie man dies umsetzen kann.

Du arbeitest doch lokal („ohne Internet bzw. PHP“). Dann muss du doch gar keine Daten übertragen, sondern den Nutzer nur den Pfad zu den ebenfalls lokal vorhandenen Bildern und Videos angeben lassen.

MfG, at

[Jochbart]

Hallo at,

1. Frage: Ist es möglich durch id Vergabe an die jeweiligen Flexboxen diese mit JS zu füllen?

Ja, aber gegebenfalls gar nicht nötig. Wenn die Reihenfolge der Formulare der Reihenfolge der Kapitel – in der Baumstruktur deines Dokumentes, nicht zwangsläufig in der sichtbaren Reihenfolge – entspricht, kannst du auch recht einfach anders lösen.

ok ich probiere mal mich damit zurecht zu finden.

2. Frage: Ich weiss nicht wie viel "Kapitel" der User ausfüllen wird, ist es möglich die Anzahl der Flexboxen automatisch zu erhöhen bzw. wenn weniger eingegeben wird zu mindern?

Sinnvoll ist es wohl, dem Nutzer unter dem letzten Formular eine Schaltfläche zur Verfügung zu stellen, die immer ein weiteres Formular für einen weiteren Kasten hinzufügt. Wenn beim Laden der Seite nur ein Formular vorhanden ist, ist dieses bereits das letzte.

ja das hört sich prima an! Hast du noch einen Tipp, wie ich das am besten realisiere?

3. Frage: Wie realisiere ich am besten die Werteweitergabe vom Formular zu der HTML-Seite? Da es auch möglich sein soll Bilder und Videos dort hochzuladen, muss es ja mit der Methode POST passieren aber dann?

Du arbeitest doch lokal („ohne Internet bzw. PHP“). Dann muss du doch gar keine Daten übertragen, sondern den Nutzer nur den Pfad zu den ebenfalls lokal vorhandenen Bildern und Videos angeben lassen.

Ich möchte ja das diese (vom Benutzer über Formular) auch einfach ausgewählt werden können und sich die Flexboxen ebenso mit den Bildern selbstständig füllen. Diese quasi auch Platz in meinem HTML Code einnehmen werden.

Danke für deine bisherige Mühe und hoffe wir reden nicht aneinander vorbei.

Gruß

Jochbart

[at]

Hallo Jochbart.

Sinnvoll ist es wohl, dem Nutzer unter dem letzten Formular eine Schaltfläche zur Verfügung zu stellen, die immer ein weiteres Formular für einen weiteren Kasten hinzufügt. Wenn beim Laden der Seite nur ein Formular vorhanden ist, ist dieses bereits das letzte.

ja das hört sich prima an! Hast du noch einen Tipp, wie ich das am besten realisiere?

Du erzeugst das Formular mittels einer Javascript-Funktion, die einerseits beim Aufbau der Seite, andererseits durch Betätigung besagter Schaltfläche aufgerufen wird. Wichtig ist aber, beim Betätigen der der Schaltfläche nicht das bisherige Formular zu ersetzen, sondern ein neues anzuhängen.

MfG, at

[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

[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

[Rolf B]

Hallo Jochbart,

...die einzelnen Boxen bekommen automatisch die id zugewiesen?

Nein

Oder muss ich diese in deinem Beispiel erst noch zuweisen?

Ja.

// 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?

Im vorausgesetzten HTML. Bei Nr. 1 arbeitest Du mit der ID und baust die ID per Stringoperation zusammen. Das setzt eine fortlaufende ID Vorgabe voraus. Es ist dafür aber egal, wo diese Elemente stehen.

Die beiden anderen Methoden setzen eine bestimmte HTML Struktur voraus. Nr. 2 adressiert die section-Elemente im main Element. Das funktioniert, wenn deine Formular-Teile als section in main stehen und es keine anderen Sections in main gibt. Nr. 3 spricht nicht die Sections an, sondern Elemente, die die Klasse formChapter haben. Das können die Sections sein, aber auch was anderes (falls Du z.B. unbedingt div oder article oder p nehmen wolltest).

Guck Dir an, was getElementById und querySelectorAll tun, dann weißt Du mehr 😀

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

Google man nach "kangax" - der hat eine umfangreiche Liste von Javascript-Funktionalitäten und wo sie funktionieren. Außer unserem WIKI ist auch das Mozilla Developer Network eine gute Referenz.

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.

Es stellt sich die Frage, wo diese Texte, Bilder und Videos gespeichert werden sollen.

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).

Ich glaube, Du hast die Funktionsweise eines Webservers nicht verstanden. Daten, die ein Benutzer eingibt, werden nicht magisch in ein anderes Dokument übertragen. "Vom Formular ins HTML Dokument schicken" - sorry, nein, das passiert einfach nicht. Dafür muss serverseitig Code laufen, der das verwaltet (und ggf. auch verhindert, dass Müll oder Scriptattacken hochgeladen werden). Wenn du das nicht selbst bauen willst, empfehle ich Dir ein Content-Management System wie Wordpress.

Rolf

[Gunnar Bittersmann]

@@Jochbart

Darunter füge ich Flexboxen ein und verknüpfe diese jeweils mit einer der Menüpunkte um dort hin zu springen.

Wegen IE solltest du deshalb nicht <section id='chapter1' class='formChapter'> usw. schreiben, sondern <section id='chapter1' class='formChapter' tabindex='-1'> usw.^[1]

Ansonsten ist im IE bei Tastaturbedienung nichts mit Dorthin-Springen.

LLAP 🖖

---

1. Bzw. <section id='chapter1' tabindex='-1'>; die Überflüssigkeit der Klasse wurde ja schon erwähnt. ↩︎