javascript, eigenes modales Fenster, Aufrufbutton in <form> – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self?srt=yes javascript, eigenes modales Fenster, Aufrufbutton in <form> Sun, 29 Nov 20 12:51:34 Z https://forum.selfhtml.org/self/2020/nov/29/javascript-eigenes-modales-fenster-aufrufbutton-in-form/1778576?srt=yes#m1778576 https://forum.selfhtml.org/self/2020/nov/29/javascript-eigenes-modales-fenster-aufrufbutton-in-form/1778576?srt=yes#m1778576 <p>Das wunderbare Bespiel unter <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Eigene_modale_Dialogfenster#Das_Anfangsbeispiel_.C3.BCberarbeitet" rel="nofollow noopener noreferrer">selfhtml -> javascript -> tutoraials -> eigene modale Dialogfenster</a>, dort unter "komplexere Dialogbox" wollte ich gern weiterverwenden. Mein Aufrufbutton soll aber zwischen <form> und </form> stehen. Dann blitzt die Dialogbox kurz auf und verschwindet wieder. Also, mit folgendem HTML-Code tritt diese Dysfunktionalität auf:</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>form</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Eine Dialog-Box mit mehreren Eingabefeldern als modales Fenster. <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>anzeigen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>. <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</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>result<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dialog</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>my-dialog<span class="token punctuation">"</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dialog<span class="token punctuation">"</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-dialog-heading<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</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>close<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Schließen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</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>my-dialog-heading<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Eingabe<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</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>button-row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ok<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>OK<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cancel<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Abbrechen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dialog</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</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>und wenn ich <form> und </form> lösche, dann wartet das modale Fenster wie gewünscht auf Eingaben. Kann mir jeman einen Tipp geben, wie es auch mit innerhalb von <form> gehen könnte?</p> <p>Hier zur Vervollständigung der zugehörige Javascript-Code aus dem Tutorial:</p> <pre><code class="block language-js"><span class="token string">'use strict'</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"DOMContentLoaded"</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> button <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"main button"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Polyfill für Browser, die das dialog-Element nicht komplett unterstützen</span> <span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> backdrop<span class="token punctuation">;</span> <span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"dialog"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">dialog</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> callBacks <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token function-variable function">cancel</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function-variable function">ok</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> close <span class="token operator">=</span> dialog<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".close"</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>dialog<span class="token punctuation">.</span>close<span class="token punctuation">)</span> <span class="token punctuation">{</span> dialog<span class="token punctuation">.</span><span class="token function-variable function">close</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>dialog<span class="token punctuation">.</span><span class="token function">hasAttribute</span><span class="token punctuation">(</span><span class="token string">"open"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> dialog<span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span><span class="token string">"open"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>backdrop <span class="token operator">&&</span> backdrop<span class="token punctuation">.</span>parentNode<span class="token punctuation">)</span> <span class="token punctuation">{</span> backdrop<span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span><span class="token function">removeChild</span><span class="token punctuation">(</span>backdrop<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</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>dialog<span class="token punctuation">.</span>show<span class="token punctuation">)</span> <span class="token punctuation">{</span> dialog<span class="token punctuation">.</span><span class="token function-variable function">show</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> closeButton <span class="token operator">=</span> dialog<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".close"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> dialog<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">"open"</span><span class="token punctuation">,</span> <span class="token string">"open"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// after displaying the dialog, focus the closeButton inside it</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>closeButton<span class="token punctuation">)</span> <span class="token punctuation">{</span> closeButton<span class="token punctuation">.</span><span class="token function">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</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>backdrop<span class="token punctuation">)</span> <span class="token punctuation">{</span> backdrop <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"div"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> backdrop<span class="token punctuation">.</span>id <span class="token operator">=</span> <span class="token string">"backdrop"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>backdrop<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> dialog<span class="token punctuation">.</span><span class="token function-variable function">setCallback</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">key<span class="token punctuation">,</span> f</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> callBacks<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> f<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> dialog<span class="token punctuation">.</span><span class="token function-variable function">triggerCallback</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">key</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 keyword">typeof</span> callBacks<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">==</span> <span class="token string">"function"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> callBacks<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>close<span class="token punctuation">)</span> <span class="token punctuation">{</span> close<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> dialog<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> dialog<span class="token punctuation">.</span><span class="token function">triggerCallback</span><span class="token punctuation">(</span><span class="token string">"cancel"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// handle buttons for user input</span> <span class="token punctuation">[</span><span class="token string">"cancel"</span><span class="token punctuation">,</span> <span class="token string">"ok"</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">n</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> button <span class="token operator">=</span> dialog<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'[name="'</span> <span class="token operator">+</span> n <span class="token operator">+</span> <span class="token string">'"]'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>button<span class="token punctuation">)</span> <span class="token punctuation">{</span> button<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> dialog<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> dialog<span class="token punctuation">.</span><span class="token function">triggerCallback</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ESC and ENTER closes open dialog and triggers corresponding callback</span> document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"keydown"</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> currentElement <span class="token operator">=</span> event<span class="token punctuation">.</span>target <span class="token operator">||</span> event<span class="token punctuation">.</span>soureElement<span class="token punctuation">,</span> prevent <span class="token operator">=</span> <span class="token punctuation">(</span>currentElement<span class="token punctuation">.</span>tagName <span class="token operator">&&</span> currentElement<span class="token punctuation">.</span>tagName<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^button|input|select|textarea$</span><span class="token regex-delimiter">/</span><span class="token regex-flags">i</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"dialog"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">dialog</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>dialog<span class="token punctuation">.</span><span class="token function">hasAttribute</span><span class="token punctuation">(</span><span class="token string">"open"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// ENTER</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>keyCode <span class="token operator">==</span> <span class="token number">13</span> <span class="token operator">&&</span> <span class="token operator">!</span>prevent<span class="token punctuation">)</span> <span class="token punctuation">{</span> dialog<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> dialog<span class="token punctuation">.</span><span class="token function">triggerCallback</span><span class="token punctuation">(</span><span class="token string">"ok"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">50</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// ESC</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>keyCode <span class="token operator">==</span> <span class="token number">27</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> dialog<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> dialog<span class="token punctuation">.</span><span class="token function">triggerCallback</span><span class="token punctuation">(</span><span class="token string">"cancel"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">50</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// komplexere Dialog-Box anzeigen</span> window<span class="token punctuation">.</span><span class="token function-variable function">myDialog</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span> <span class="token constant">OK</span><span class="token punctuation">,</span> cancel</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> dialog <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#my-dialog"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> buttonRow <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#my-dialog .button-row"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> heading <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#my-dialog-heading"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> element<span class="token punctuation">,</span> p<span class="token punctuation">,</span> prop<span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>dialog <span class="token operator">&&</span> buttonRow<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Standard-Titel</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>heading<span class="token punctuation">)</span> <span class="token punctuation">{</span> heading<span class="token punctuation">.</span>textContent <span class="token operator">=</span> <span class="token string">"Eingabe"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// jedes <ul> und <p> entfernen, außer <p class="button-row"></span> <span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>dialog<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span> <span class="token string">"ul, p:not(.button-row)"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">p</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> p<span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span><span class="token function">removeChild</span><span class="token punctuation">(</span>p<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Elemente erstellen und gegebenenfalls mit Inhalten befüllen</span> <span class="token keyword">for</span> <span class="token punctuation">(</span>prop <span class="token keyword">in</span> data<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// alles bekommt ein <p> drumherum</span> p <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"p"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> buttonRow<span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span><span class="token function">insertBefore</span><span class="token punctuation">(</span>p<span class="token punctuation">,</span> buttonRow<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// simple Textausgabe</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">&&</span> data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">==</span> <span class="token string">"info"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> p<span class="token punctuation">.</span>textContent <span class="token operator">=</span> data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">.</span>text<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// anderer Titel</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">&&</span> data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">==</span> <span class="token string">"title"</span> <span class="token operator">&&</span> heading<span class="token punctuation">)</span> <span class="token punctuation">{</span> heading<span class="token punctuation">.</span>textContent <span class="token operator">=</span> data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">.</span>text<span class="token punctuation">;</span> <span class="token comment">// neues <p> wird hierfür nicht benötigt</span> p<span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span><span class="token function">removeChild</span><span class="token punctuation">(</span>p<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// numerischer Wert</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">&&</span> data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">==</span> <span class="token string">"number"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// <label> als Kindelement für Beschriftung</span> p<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"label"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> p<span class="token punctuation">.</span>lastChild<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">createTextNode</span><span class="token punctuation">(</span>data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">.</span>text <span class="token operator">+</span> <span class="token string">" "</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// <input type="number"></span> element <span class="token operator">=</span> p<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"input"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span><span class="token string">"max"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> element<span class="token punctuation">.</span>max <span class="token operator">=</span> data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token string">"max"</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span><span class="token string">"min"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> element<span class="token punctuation">.</span>min <span class="token operator">=</span> data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token string">"min"</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span><span class="token string">"step"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> element<span class="token punctuation">.</span>step <span class="token operator">=</span> data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token string">"step"</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> element<span class="token punctuation">.</span>name <span class="token operator">=</span> prop<span class="token punctuation">;</span> element<span class="token punctuation">.</span>type <span class="token operator">=</span> <span class="token string">"number"</span><span class="token punctuation">;</span> element<span class="token punctuation">.</span>value <span class="token operator">=</span> element<span class="token punctuation">.</span>min <span class="token operator">=</span> data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token string">"min"</span><span class="token punctuation">]</span> <span class="token operator">||</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">.</span>default<span class="token punctuation">)</span> <span class="token punctuation">{</span> element<span class="token punctuation">.</span>value <span class="token operator">=</span> data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">.</span>default<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// Mehrfachauswahl</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">&&</span> data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">==</span> <span class="token string">"multiple"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> p<span class="token punctuation">.</span>textContent <span class="token operator">=</span> data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">.</span>text<span class="token punctuation">;</span> <span class="token comment">// alle Optionen wandern in ein <ul></span> element <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"ul"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> buttonRow<span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span><span class="token function">insertBefore</span><span class="token punctuation">(</span>element<span class="token punctuation">,</span> buttonRow<span class="token punctuation">)</span><span class="token punctuation">;</span> data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">.</span>options<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">d<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> input <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"input"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> label <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"label"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> li <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"li"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// <li> in <ul> einhängen</span> element<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>li<span class="token punctuation">)</span><span class="token punctuation">;</span> input<span class="token punctuation">.</span>id <span class="token operator">=</span> prop <span class="token operator">+</span> <span class="token string">"-"</span> <span class="token operator">+</span> index<span class="token punctuation">;</span> input<span class="token punctuation">.</span>name <span class="token operator">=</span> prop <span class="token operator">+</span> <span class="token string">"-"</span> <span class="token operator">+</span> index<span class="token punctuation">;</span> input<span class="token punctuation">.</span>type <span class="token operator">=</span> <span class="token string">"checkbox"</span><span class="token punctuation">;</span> input<span class="token punctuation">.</span>value <span class="token operator">=</span> d<span class="token punctuation">;</span> li<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>input<span class="token punctuation">)</span><span class="token punctuation">;</span> label<span class="token punctuation">.</span>htmlFor <span class="token operator">=</span> prop <span class="token operator">+</span> <span class="token string">"-"</span> <span class="token operator">+</span> index<span class="token punctuation">;</span> label<span class="token punctuation">.</span>textContent <span class="token operator">=</span> <span class="token string">" "</span> <span class="token operator">+</span> d li<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>label<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">.</span>default <span class="token operator">&&</span> data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">.</span>default <span class="token operator">==</span> d<span class="token punctuation">)</span> <span class="token punctuation">{</span> input<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">"checked"</span><span class="token punctuation">,</span> <span class="token string">"checked"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// Einfachauswahl</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">&&</span> data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">==</span> <span class="token string">"select"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// <label> als Kindelement für Beschriftung</span> p<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"label"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> p<span class="token punctuation">.</span>lastChild<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">createTextNode</span><span class="token punctuation">(</span>data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">.</span>text <span class="token operator">+</span> <span class="token string">" "</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// alle Optionen wandern in ein <ul></span> element <span class="token operator">=</span> p<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"select"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> element<span class="token punctuation">.</span>name <span class="token operator">=</span> prop<span class="token punctuation">;</span> data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">.</span>options<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">d</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> o <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"option"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> o<span class="token punctuation">.</span>textContent <span class="token operator">=</span> d<span class="token punctuation">;</span> o<span class="token punctuation">.</span>value <span class="token operator">=</span> d<span class="token punctuation">;</span> element<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>o<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">.</span>default <span class="token operator">&&</span> data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">.</span>default <span class="token operator">==</span> d<span class="token punctuation">)</span> <span class="token punctuation">{</span> o<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">"selected"</span><span class="token punctuation">,</span> <span class="token string">"selected"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// Texteingabe</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">&&</span> data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">==</span> <span class="token string">"text"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// <label> als Kindelement für Beschriftung</span> p<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"label"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> p<span class="token punctuation">.</span>lastChild<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">createTextNode</span><span class="token punctuation">(</span>data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">.</span>text<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// alle Optionen wandern in ein <ul></span> element <span class="token operator">=</span> p<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"textarea"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> element<span class="token punctuation">.</span>name <span class="token operator">=</span> prop<span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">.</span>default<span class="token punctuation">)</span> <span class="token punctuation">{</span> element<span class="token punctuation">.</span>textContent <span class="token operator">=</span> data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">.</span>default<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> dialog<span class="token punctuation">.</span><span class="token function">setCallback</span><span class="token punctuation">(</span><span class="token string">"cancel"</span><span class="token punctuation">,</span> cancel<span class="token punctuation">)</span><span class="token punctuation">;</span> dialog<span class="token punctuation">.</span><span class="token function">setCallback</span><span class="token punctuation">(</span><span class="token string">"ok"</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> result <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> elements<span class="token punctuation">;</span> <span class="token comment">// Ergebnisse ermitteln</span> <span class="token keyword">for</span> <span class="token punctuation">(</span>prop <span class="token keyword">in</span> data<span class="token punctuation">)</span> <span class="token punctuation">{</span> elements <span class="token operator">=</span> <span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>dialog<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span> <span class="token string">'[name^="'</span> <span class="token operator">+</span> prop <span class="token operator">+</span> <span class="token string">'"]'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">&&</span> data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">==</span> <span class="token string">"multiple"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> result<span class="token punctuation">[</span>prop<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> elements<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">element</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>element<span class="token punctuation">.</span>checked<span class="token punctuation">)</span> <span class="token punctuation">{</span> result<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>element<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">!=</span> <span class="token string">"title"</span> <span class="token operator">&&</span> data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">!=</span> <span class="token string">"info"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> result<span class="token punctuation">[</span>prop<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>elements<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> result<span class="token punctuation">[</span>prop<span class="token punctuation">]</span> <span class="token operator">=</span> elements<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>value<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// Ergebnisse an die Callback-Funktion zurück geben</span> <span class="token constant">OK</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> dialog<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// anzeigen-Button aktivieren</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>button<span class="token punctuation">)</span> <span class="token punctuation">{</span> button<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">myDialog</span><span class="token punctuation">(</span> <span class="token comment">// data</span> <span class="token punctuation">{</span> <span class="token literal-property property">instructions</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">"Bitte seien Sie jetzt komplett ehrlich und füllen Sie wahrheitsgemäß alles aus!"</span><span class="token punctuation">,</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"info"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">"Sonderabfrage"</span><span class="token punctuation">,</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"title"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">sex</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string-property property">"default"</span><span class="token operator">:</span> <span class="token string">"weiblich"</span><span class="token punctuation">,</span> <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"männlich"</span><span class="token punctuation">,</span> <span class="token string">"weiblich"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">"Geschlecht"</span><span class="token punctuation">,</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"select"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string-property property">"default"</span><span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span> <span class="token string-property property">"max"</span><span class="token operator">:</span> <span class="token number">150</span><span class="token punctuation">,</span> <span class="token string-property property">"min"</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token literal-property property">step</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">"Alter"</span><span class="token punctuation">,</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"number"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">preferences</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string-property property">"default"</span><span class="token operator">:</span> <span class="token string">"Pop"</span><span class="token punctuation">,</span> <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"Jazz"</span><span class="token punctuation">,</span> <span class="token string">"Swing"</span><span class="token punctuation">,</span> <span class="token string">"Latin"</span><span class="token punctuation">,</span> <span class="token string">"Klassik"</span><span class="token punctuation">,</span> <span class="token string">"Hiphop"</span><span class="token punctuation">,</span> <span class="token string">"Pop"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">"Diese Musik mag ich gerne"</span><span class="token punctuation">,</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"multiple"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">"Das will ich mitteilen"</span><span class="token punctuation">,</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"text"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// OK</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> output <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"main pre"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> prop<span class="token punctuation">,</span> result <span class="token operator">=</span> <span class="token string">"Ergebnis:\r\n=========\r\n\r\n"</span><span class="token punctuation">;</span> <span class="token keyword">for</span> <span class="token punctuation">(</span>prop <span class="token keyword">in</span> data<span class="token punctuation">)</span> <span class="token punctuation">{</span> result <span class="token operator">+=</span> prop <span class="token operator">+</span> <span class="token string">":"</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span> <span class="token operator">==</span> <span class="token string">"object"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> result <span class="token operator">+=</span> <span class="token punctuation">(</span>index <span class="token operator">?</span> <span class="token string">","</span> <span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">"\r\n\t"</span> <span class="token operator">+</span> value<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> result <span class="token operator">+=</span> <span class="token string">" "</span> <span class="token operator">+</span> data<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> result <span class="token operator">+=</span> <span class="token string">"\r\n"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>output<span class="token punctuation">)</span> <span class="token punctuation">{</span> output<span class="token punctuation">.</span>textContent <span class="token operator">=</span> result<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// cancel</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> output <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"main pre"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>output<span class="token punctuation">)</span> <span class="token punctuation">{</span> output<span class="token punctuation">.</span>textContent <span class="token operator">=</span> <span class="token string">"(kein Ergebnis)"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> javascript, eigenes modales Fenster, Aufrufbutton in <form> Sun, 29 Nov 20 12:58:37 Z https://forum.selfhtml.org/self/2020/nov/29/javascript-eigenes-modales-fenster-aufrufbutton-in-form/1778578?srt=yes#m1778578 https://forum.selfhtml.org/self/2020/nov/29/javascript-eigenes-modales-fenster-aufrufbutton-in-form/1778578?srt=yes#m1778578 <p>Liebe(r) gschade,</p> <p>Dein Button ist ein <code>submit</code>-Button (das ist der Default-Typ und bei Dir steht kein <code>type</code>-Attribut), der das Formular versendet:</p> <blockquote> <pre><code class="block"><p>Eine Dialog-Box mit mehreren Eingabefeldern als modales Fenster. <button>anzeigen</button>. </p> </code></pre> </blockquote> <p>Probiere doch einmal, ob ein <code>type="button"</code> das Problem bereits löst.</p> <p>Liebe Grüße</p> <p>Felix Riesterer</p> javascript, eigenes modales Fenster, Aufrufbutton in <form> Sun, 29 Nov 20 14:17:25 Z https://forum.selfhtml.org/self/2020/nov/29/javascript-eigenes-modales-fenster-aufrufbutton-in-form/1778579?srt=yes#m1778579 https://forum.selfhtml.org/self/2020/nov/29/javascript-eigenes-modales-fenster-aufrufbutton-in-form/1778579?srt=yes#m1778579 <p>Servus!</p> <blockquote> <p>Liebe(r) gschade,</p> <p>Dein Button ist ein <code>submit</code>-Button (das ist der Default-Typ und bei Dir steht kein <code>type</code>-Attribut), der das Formular versendet:</p> <blockquote> <pre><code class="block"><p>Eine Dialog-Box mit mehreren Eingabefeldern als modales Fenster. <button>anzeigen</button>. </p> </code></pre> </blockquote> <p>Probiere doch einmal, ob ein <code>type="button"</code> das Problem bereits löst.</p> </blockquote> <p>Das kommt so oft vor (und passiert selbst mir immer mal wieder), dass man's noch mal deutlich irgendwo hinschreiben müsste.</p> <p>Ich hab's jetzt im Artikel zum form-Element getan. Wo sollte es sonst noch hin?</p> <ul> <li><a href="https://wiki.selfhtml.org/wiki/HTML/Formulare/form" rel="nofollow noopener noreferrer">HTML/Formulare/form</a></li> </ul> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> javascript, eigenes modales Fenster, Aufrufbutton in <form> Sun, 29 Nov 20 16:25:25 Z https://forum.selfhtml.org/self/2020/nov/29/javascript-eigenes-modales-fenster-aufrufbutton-in-form/1778580?srt=yes#m1778580 https://forum.selfhtml.org/self/2020/nov/29/javascript-eigenes-modales-fenster-aufrufbutton-in-form/1778580?srt=yes#m1778580 <p>Hi there,</p> <p>vielleicht sollte man das ein bisschen besser kommunizieren, es kommt in der letzten Zeit immer öfter vor, daß jemand als "Problematische Seite" den Verweis auf jene Seite im selfhtml-Wiki einträgt, die er gerade nicht versteht... </p> javascript, eigenes modales Fenster, Aufrufbutton in <form> Sun, 29 Nov 20 16:39:11 Z https://forum.selfhtml.org/self/2020/nov/29/javascript-eigenes-modales-fenster-aufrufbutton-in-form/1778582?srt=yes#m1778582 https://forum.selfhtml.org/self/2020/nov/29/javascript-eigenes-modales-fenster-aufrufbutton-in-form/1778582?srt=yes#m1778582 <p>Servus!</p> <blockquote> <p>Hi there,</p> <p>vielleicht sollte man das ein bisschen besser kommunizieren, es kommt in der letzten Zeit immer öfter vor, daß jemand als "Problematische Seite" den Verweis auf jene Seite im selfhtml-Wiki einträgt, die er gerade nicht versteht... </p> </blockquote> <p>Na ja, teilweise ist dort ja der Fehler oder das Problem zu finden - duckundwech. </p> <p>Es gab schon Diskussionen, diese Linkmöglichkeit umzubenennen, aber die perfekte Lösung wird's da nicht geben.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> javascript, eigenes modales Fenster, Aufrufbutton in <form> Sun, 29 Nov 20 17:36:24 Z https://forum.selfhtml.org/self/2020/nov/29/javascript-eigenes-modales-fenster-aufrufbutton-in-form/1778584?srt=yes#m1778584 https://forum.selfhtml.org/self/2020/nov/29/javascript-eigenes-modales-fenster-aufrufbutton-in-form/1778584?srt=yes#m1778584 <p>Hallo klawischnigg,</p> <blockquote> <p>es kommt in der letzten Zeit immer öfter vor, daß jemand als "Problematische Seite" den Verweis auf jene Seite im selfhtml-Wiki einträgt, die er gerade nicht versteht... </p> </blockquote> <p>Ja, er hat also mit der Wiki-Seite ein Problem </p> <blockquote> <p>vielleicht sollte man das ein bisschen besser kommunizieren,</p> </blockquote> <p>Wie lautet dein Vorschlag?</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> javascript, eigenes modales Fenster, Aufrufbutton in <form> Sun, 29 Nov 20 21:59:05 Z https://forum.selfhtml.org/self/2020/nov/29/javascript-eigenes-modales-fenster-aufrufbutton-in-form/1778587?srt=yes#m1778587 https://forum.selfhtml.org/self/2020/nov/29/javascript-eigenes-modales-fenster-aufrufbutton-in-form/1778587?srt=yes#m1778587 <p>Hi there,</p> <blockquote> <blockquote> <p>es kommt in der letzten Zeit immer öfter vor, daß jemand als "Problematische Seite" den Verweis auf jene Seite im selfhtml-Wiki einträgt, die er gerade nicht versteht... </p> </blockquote> <p>Ja, er hat also mit der Wiki-Seite ein Problem </p> <blockquote> <p>vielleicht sollte man das ein bisschen besser kommunizieren,</p> </blockquote> <p>Wie lautet dein Vorschlag?</p> </blockquote> <p>Gute Frage. Vielleicht irgendetwas mit "<strong>Meine</strong> problematische Seite" und "Seite im Wiki, die ich nicht versteh'"... </p> javascript, eigenes modales Fenster, Aufrufbutton in <form> Sun, 29 Nov 20 22:42:28 Z https://forum.selfhtml.org/self/2020/nov/29/javascript-eigenes-modales-fenster-aufrufbutton-in-form/1778588?srt=yes#m1778588 https://forum.selfhtml.org/self/2020/nov/29/javascript-eigenes-modales-fenster-aufrufbutton-in-form/1778588?srt=yes#m1778588 <p>Hallo,</p> <p>Ich finde es ok, die</p> <blockquote> <p>"Seite im Wiki, die ich nicht versteh'"</p> </blockquote> <p>als problematische Seite zu bezeichnen. Man kann das als Arbeitshypothese nehmen und in der folgenden Diskussion gradebiegen…</p> <p>Gruß<br> Kalk</p> javascript, eigenes modales Fenster, Aufrufbutton in <form> Sun, 29 Nov 20 22:57:56 Z https://forum.selfhtml.org/self/2020/nov/29/javascript-eigenes-modales-fenster-aufrufbutton-in-form/1778590?srt=yes#m1778590 https://forum.selfhtml.org/self/2020/nov/29/javascript-eigenes-modales-fenster-aufrufbutton-in-form/1778590?srt=yes#m1778590 <p>Hi there,</p> <blockquote> <p>Ich finde es ok, die</p> <blockquote> <p>"Seite im Wiki, die ich nicht versteh'"</p> </blockquote> <p>als problematische Seite zu bezeichnen. Man kann das als Arbeitshypothese nehmen und in der folgenden Diskussion gradebiegen…</p> </blockquote> <p>Weiß nicht, ich klick' da immer drauf, in einer leicht masochistischen Erwartungshaltung auf absolut grottiges Webdesign und haarsträubend schlechtes Javascript - und wenn ich dann auf einer Seite des selfhtml-Wikis lande...ich muß es bekennen, ich bin dann echt ein bisschen entäuscht... </p> javascript, eigenes modales Fenster, Aufrufbutton in <form> Mon, 30 Nov 20 12:51:04 Z https://forum.selfhtml.org/self/2020/nov/29/javascript-eigenes-modales-fenster-aufrufbutton-in-form/1778622?srt=yes#m1778622 https://forum.selfhtml.org/self/2020/nov/29/javascript-eigenes-modales-fenster-aufrufbutton-in-form/1778622?srt=yes#m1778622 <p>Lieber klawischnigg,</p> <blockquote> <p>ich bin dann echt ein bisschen entäuscht... </p> </blockquote> <p>davon, dass Du kein absolut grottiges Webdesign findest, oder vom Wiki? Oder empfindest Du das Wiki als absolut grottiges Webdesign und bist nur enttäuscht, dass es "schon wieder das Wiki" ist?</p> <p>Disclaimer: Dieses Posting ist nicht ernst gemeint.</p> <p>Liebe Grüße</p> <p>Felix Riesterer</p> javascript, eigenes modales Fenster, Aufrufbutton in <form> Mon, 30 Nov 20 15:25:40 Z https://forum.selfhtml.org/self/2020/nov/29/javascript-eigenes-modales-fenster-aufrufbutton-in-form/1778627?srt=yes#m1778627 https://forum.selfhtml.org/self/2020/nov/29/javascript-eigenes-modales-fenster-aufrufbutton-in-form/1778627?srt=yes#m1778627 <p>Hi there,</p> <blockquote> <blockquote> <p>ich bin dann echt ein bisschen entäuscht... </p> </blockquote> <p>davon, dass Du kein absolut grottiges Webdesign findest, oder vom Wiki?</p> </blockquote> <p>Das Wiki hat mich noch nie enttäuscht. Das selfhtml-Wiki ist für mich der Leuchtturm an den rauhen, gischtspritzenden und vor Untiefen nur so strotzenden Gewässern der Webgestaltung.</p> <blockquote> <p>Oder empfindest Du das Wiki als absolut grottiges Webdesign und bist nur enttäuscht, dass es "schon wieder das Wiki" ist?</p> </blockquote> <p>Ersteres nein, zweiteres ja... </p>