tag:forum.selfhtml.org,2005:/self Flexbox(en) einzel ansprechen und füllen – SELFHTML-Forum 2017-09-17T09:10:21Z https://forum.selfhtml.org/self/2017/sep/13/flexbox-en-einzel-ansprechen-und-fuellen/1703900#m1703900 Jochbart 2017-09-13T16:25:26Z 2017-09-13T16:25:26Z Flexbox(en) einzel ansprechen und füllen <p>Hallo liebe Community,</p> <p>ich hänge gerade an folgendem Problem bzw. eher einer Frage fest:</p> <p>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.</p> <p>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.</p> <ol> <li> <p>Frage: Ist es möglich durch id Vergabe an die jeweiligen Flexboxen diese mit JS zu füllen?</p> </li> <li> <p>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?</p> </li> <li> <p>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?</p> </li> </ol> <p>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.</p> <p>Vielen Dank im Voraus!</p> https://forum.selfhtml.org/self/2017/sep/13/flexbox-en-einzel-ansprechen-und-fuellen/1703907#m1703907 at 2017-09-13T17:54:43Z 2017-09-13T17:57:05Z Flexbox(en) einzel ansprechen und füllen <p>Hallo Jochbart,</p> <p>ich antworte dir mal, obwohl mir sehr unsicher bin, ob ich dich richtig verstanden habe.</p> <blockquote> <ol> <li>Frage: Ist es möglich durch id Vergabe an die jeweiligen Flexboxen diese mit JS zu füllen?</li> </ol> </blockquote> <p>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 <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/Document/querySelectorAll" rel="nofollow noopener noreferrer">anders</a> lösen.</p> <blockquote> <p>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?</p> </blockquote> <p>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.</p> <blockquote> <p>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?</p> <p>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.</p> </blockquote> <p>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.</p> <p>MfG, at</p> https://forum.selfhtml.org/self/2017/sep/13/flexbox-en-einzel-ansprechen-und-fuellen/1703910#m1703910 Rolf B 2017-09-13T18:07:07Z 2017-09-13T18:07:07Z Flexbox(en) einzel ansprechen und füllen <p>Hallo Jochbart,</p> <p>Kurzfassung der Antwort: 1. Ja, 2. Ja, 3: Hä?</p> <p>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 <code>document.getElementById('box1');</code> finden. Oder box2, oder box3, oder oder.</p> <p>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.</p> <p>Ein seiteninterner Link wie <code><a href='#box3'>Dritte Box</a></code> ist für interne Navigation verwendbar.</p> <p>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:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>chapter1<span class="token punctuation">'</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>formChapter<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token comment"><!-- formularfelder --></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>chapter2<span class="token punctuation">'</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>formChapter<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token comment"><!-- formularfelder --></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>chapter3<span class="token punctuation">'</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>formChapter<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token comment"><!-- formularfelder --></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span> </code></pre> <p>Auf die formChapter class kannst Du übrigens verzichten, wenn der Chapter-Container nur sections enthält, die Formularkapitel sind.</p> <p>In JavaScript kannst Du nun entweder mit der ID oder mit CSS Selektoren die entsprechenden Kapitel finden:</p> <pre><code class="block language-js"><span class="token comment">// erwartet Kapitelnummer beginnend mit 1</span> <span class="token keyword">function</span> <span class="token function">findChapter</span><span class="token punctuation">(</span><span class="token parameter">i</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// entweder </span> <span class="token keyword">return</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'chapter'</span><span class="token operator">+</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// oder</span> <span class="token keyword">return</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'main section'</span><span class="token punctuation">)</span><span class="token punctuation">[</span>i<span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// oder</span> <span class="token keyword">return</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'main .formChapter'</span><span class="token punctuation">)</span><span class="token punctuation">[</span>i<span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>In dem so gefundenen Formularkapitel kannst Du nun schalten und walten wie Du es brauchst.</p> <p>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.</p> <pre><code class="block language-js"><span class="token comment">// erwartet DOM-Element zum Kapitel (Rückgabe von findChapter)</span> <span class="token keyword">function</span> <span class="token function">removeChapter</span><span class="token punctuation">(</span><span class="token parameter">chap</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>chap<span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span> <span class="token comment">// entweder</span> chap<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// oder</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>chap<span class="token punctuation">.</span>parentNode<span class="token punctuation">)</span> chap<span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span><span class="token function">removeChild</span><span class="token punctuation">(</span>chap<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>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. <a href="http://wiki.selfhtml.org/wiki/JavaScript/DOM/Document/createElement" rel="nofollow noopener noreferrer">Im Wiki steht was dazu</a>.</p> <p>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.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> Dosen sind silbern </div> https://forum.selfhtml.org/self/2017/sep/13/flexbox-en-einzel-ansprechen-und-fuellen/1703963#m1703963 Jochbart 2017-09-14T13:02:27Z 2017-09-14T13:02:27Z Flexbox(en) einzel ansprechen und füllen <p>Hallo at,</p> <blockquote> <blockquote> <ol> <li>Frage: Ist es möglich durch id Vergabe an die jeweiligen Flexboxen diese mit JS zu füllen?</li> </ol> </blockquote> <p>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 <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/Document/querySelectorAll" rel="nofollow noopener noreferrer">anders</a> lösen.</p> </blockquote> <p>ok ich probiere mal mich damit zurecht zu finden.</p> <blockquote></blockquote> <blockquote> <blockquote> <p>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?</p> </blockquote> <p>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.</p> </blockquote> <p>ja das hört sich prima an! Hast du noch einen Tipp, wie ich das am besten realisiere?</p> <blockquote> <blockquote> <p>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?</p> </blockquote> </blockquote> <blockquote> <p>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.</p> </blockquote> <p>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.</p> <p>Danke für deine bisherige Mühe und hoffe wir reden nicht aneinander vorbei.</p> <p>Gruß</p> <p>Jochbart</p> https://forum.selfhtml.org/self/2017/sep/13/flexbox-en-einzel-ansprechen-und-fuellen/1703965#m1703965 Jochbart 2017-09-14T13:21:05Z 2017-09-14T13:21:05Z Flexbox(en) einzel ansprechen und füllen <p>Hallo Rolf,</p> <blockquote> <p>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 <code>document.getElementById('box1');</code> finden. Oder box2, oder box3, oder oder.</p> </blockquote> <p>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?</p> <blockquote> <p>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:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>chapter1<span class="token punctuation">'</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>formChapter<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token comment"><!-- formularfelder --></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>chapter2<span class="token punctuation">'</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>formChapter<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token comment"><!-- formularfelder --></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>chapter3<span class="token punctuation">'</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>formChapter<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token comment"><!-- formularfelder --></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>ok werde ich mir mal anschauen!</p> <blockquote> <p>Auf die formChapter class kannst Du übrigens verzichten, wenn der Chapter-Container nur sections enthält, die Formularkapitel sind.</p> <p>In JavaScript kannst Du nun entweder mit der ID oder mit CSS Selektoren die entsprechenden Kapitel finden:</p> <pre><code class="block language-js"><span class="token comment">// erwartet Kapitelnummer beginnend mit 1</span> <span class="token keyword">function</span> <span class="token function">findChapter</span><span class="token punctuation">(</span><span class="token parameter">i</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// entweder </span> <span class="token keyword">return</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'chapter'</span><span class="token operator">+</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// oder</span> <span class="token keyword">return</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'main section'</span><span class="token punctuation">)</span><span class="token punctuation">[</span>i<span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// oder</span> <span class="token keyword">return</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'main .formChapter'</span><span class="token punctuation">)</span><span class="token punctuation">[</span>i<span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> </blockquote> <p>Worin liegt der Unterschied dieser 3 returns?</p> <blockquote> <p>In dem so gefundenen Formularkapitel kannst Du nun schalten und walten wie Du es brauchst.</p> <p>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.</p> <pre><code class="block language-js"><span class="token comment">// erwartet DOM-Element zum Kapitel (Rückgabe von findChapter)</span> <span class="token keyword">function</span> <span class="token function">removeChapter</span><span class="token punctuation">(</span><span class="token parameter">chap</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>chap<span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span> <span class="token comment">// entweder</span> chap<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// oder</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>chap<span class="token punctuation">.</span>parentNode<span class="token punctuation">)</span> chap<span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span><span class="token function">removeChild</span><span class="token punctuation">(</span>chap<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> </blockquote> <p>ok von remove habe ich noch nichts gehört. Werde ich mir mal anschauen!</p> <blockquote> <p>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. <a href="http://wiki.selfhtml.org/wiki/JavaScript/DOM/Document/createElement" rel="nofollow noopener noreferrer">Im Wiki steht was dazu</a>.</p> </blockquote> <p>Sieht auf jeden Fall schon brauchbar aus, hoffe das hilft mir weiter.</p> <blockquote> <p>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.</p> </blockquote> <p>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.</p> <p>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).</p> <p>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.</p> <p>Gruß Jochbart</p> https://forum.selfhtml.org/self/2017/sep/13/flexbox-en-einzel-ansprechen-und-fuellen/1704085#m1704085 at 2017-09-17T09:10:21Z 2017-09-17T09:10:21Z Flexbox(en) einzel ansprechen und füllen <p>Hallo Jochbart.</p> <blockquote> <blockquote> <p>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.</p> </blockquote> <p>ja das hört sich prima an! Hast du noch einen Tipp, wie ich das am besten realisiere?</p> </blockquote> <p>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.</p> <p>MfG, at</p> https://forum.selfhtml.org/self/2017/sep/13/flexbox-en-einzel-ansprechen-und-fuellen/1703973#m1703973 Rolf B 2017-09-14T14:42:05Z 2017-09-14T14:42:05Z Flexbox(en) einzel ansprechen und füllen <p>Hallo Jochbart,</p> <blockquote> <p>...die einzelnen Boxen bekommen automatisch die id zugewiesen?</p> </blockquote> <p>Nein</p> <blockquote> <p>Oder muss ich diese in deinem Beispiel erst noch zuweisen?</p> </blockquote> <p>Ja.</p> <blockquote> <blockquote> <pre><code class="block language-js"><span class="token comment">// erwartet Kapitelnummer beginnend mit 1</span> <span class="token keyword">function</span> <span class="token function">findChapter</span><span class="token punctuation">(</span><span class="token parameter">i</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// entweder </span> <span class="token keyword">return</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'chapter'</span><span class="token operator">+</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// oder</span> <span class="token keyword">return</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'main section'</span><span class="token punctuation">)</span><span class="token punctuation">[</span>i<span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// oder</span> <span class="token keyword">return</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'main .formChapter'</span><span class="token punctuation">)</span><span class="token punctuation">[</span>i<span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> </blockquote> <p>Worin liegt der Unterschied dieser 3 returns?</p> </blockquote> <p>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.</p> <p>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).</p> <p>Guck Dir an, was getElementById und querySelectorAll tun, dann weißt Du mehr </p> <blockquote> <p>ok von remove habe ich noch nichts gehört. Werde ich mir mal anschauen!</p> </blockquote> <p>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.</p> <blockquote> <p>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.</p> <p>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.</p> </blockquote> <p>Es stellt sich die Frage, wo diese Texte, Bilder und Videos gespeichert werden sollen.</p> <blockquote> <p>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).</p> </blockquote> <p>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.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> Dosen sind silbern </div> https://forum.selfhtml.org/self/2017/sep/13/flexbox-en-einzel-ansprechen-und-fuellen/1704005#m1704005 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2017-09-15T06:09:30Z 2017-09-15T06:13:19Z Flexbox(en) einzel ansprechen und füllen <p>@@Jochbart</p> <blockquote> <p>Darunter füge ich Flexboxen ein und verknüpfe diese jeweils mit einer der Menüpunkte um dort hin zu springen.</p> </blockquote> <p>Wegen IE solltest du deshalb nicht <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>chapter1<span class="token punctuation">'</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>formChapter<span class="token punctuation">'</span></span><span class="token punctuation">></span></span></code> usw. schreiben, sondern <code class="good language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>chapter1<span class="token punctuation">'</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>formChapter<span class="token punctuation">'</span></span> <span class="token attr-name">tabindex</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>-1<span class="token punctuation">'</span></span><span class="token punctuation">></span></span></code> usw.<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></p> <p>Ansonsten ist im IE bei Tastaturbedienung nichts mit Dorthin-Springen.</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Bzw. <code class="good language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>chapter1<span class="token punctuation">'</span></span> <span class="token attr-name">tabindex</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>-1<span class="token punctuation">'</span></span><span class="token punctuation">></span></span></code>; die Überflüssigkeit der Klasse wurde ja schon erwähnt. <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section>