Welcher Button wurde geklickt – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self Welcher Button wurde geklickt Mon, 17 Dec 18 12:55:12 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738778#m1738778 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738778#m1738778 <p>hi,</p> <p>mit <code>document.forms[0].addEventListener('submit', cp2bin, false)</code> wird das Submit abgefangen. Im Formular gibt es 3 Buttons die das auslösen. Gibt es innerhalb der Funktion <code>cp2bin</code> eine Möglichkeit herauszukriegen welcher Button geklickt wurde?</p> <p>Bitte mal um Hinwweises.</p> Welcher Button wurde geklickt Mon, 17 Dec 18 13:17:07 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738781#m1738781 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738781#m1738781 <p>@@pl</p> <blockquote> <p>mit <code>document.forms[0].addEventListener('submit', cp2bin, false)</code> wird das Submit abgefangen. Im Formular gibt es 3 Buttons die das auslösen. Gibt es innerhalb der Funktion <code>cp2bin</code> eine Möglichkeit herauszukriegen welcher Button geklickt wurde?</p> </blockquote> <p>Ja.</p> <blockquote> <p>Bitte mal um Hinwweises.</p> </blockquote> <p>Für genauere Hinwweises bitte <em lang="en">more input</em>.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Welcher Button wurde geklickt Mon, 17 Dec 18 13:29:53 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738782#m1738782 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738782#m1738782 <p>Hallo pl,</p> <p>sieht schlecht aus. Scheint eine Lücke zu sein. Oder die JavaScript-Götter halten es für unwichtig.</p> <p>Die Frage ist, wie immer: was willst Du tun, kannst Du es anders lösen?</p> <p>Methode und Action des POST kannst Du mit dem formAction- und formMethod-Attribut der Buttons überschreiben, wenn es Dir nur darum geht. Das funkt dann auch ohne JavaScript.</p> <p>Der brute-force Ansatz (vorgeschlagen auf Stackoverflow) wäre ein click-Handler auf den Buttons, der in einem selbsterfundenen Property des Form eine "ich war's" Info hinterlässt. Der Submit-Handler müsste diese Info dann gleich wieder abräumen. Besser wüsste ich es nicht.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> Welcher Button wurde geklickt Mon, 17 Dec 18 13:37:39 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738784#m1738784 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738784#m1738784 <p>Hallo pl,</p> <p>es gibt noch die Möglichkeit, zu prüfen, welcher Button den Fokus hat. Das hilft Dir natürlich nicht wenn der User das Form mit ENTER in irgendeinem Input abschickt, aber dann musst Du Dir eh einen Default-Button überlegen.</p> <pre><code class="block language-js"><span class="token keyword">function</span> <span class="token function">submitHandler</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> btn <span class="token operator">=</span> e<span class="token punctuation">.</span>currentTarget<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"button:focus"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token operator">...</span> <span class="token punctuation">}</span> </code></pre> <p>Letztlich hättest Du das jetzt aber alles selbst von der Ente bekommen können (oder vom unheiligen Bimbam, oder von der Werbeschleuder mit Bergblick).</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> Welcher Button wurde geklickt Mon, 17 Dec 18 14:19:19 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738788#m1738788 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738788#m1738788 <p>hallo</p> <blockquote> <p>hi,</p> <p>mit <code>document.forms[0].addEventListener('submit', cp2bin, false)</code> wird das Submit abgefangen. Im Formular gibt es 3 Buttons die das auslösen. Gibt es innerhalb der Funktion <code>cp2bin</code> eine Möglichkeit herauszukriegen welcher Button geklickt wurde?</p> <p>Bitte mal um Hinwweises.</p> </blockquote> <p>teste mal</p> <p><button name="which_button" value="fred">Your label</button></p> <div class="signature">-- <br> <a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a> </div> In Sachen Progressive Enhancement Wed, 19 Dec 18 14:11:45 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1739060#m1739060 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1739060#m1739060 <p>habe ich <a href="http://rolfrost.de/cp2bin.html" rel="nofollow noopener noreferrer">hier</a> den gesamten JS Code ausgelagert.</p> <p>Nun, wenn diese JS Datei im <head>-Bereich geladen wird, kann ja das <form> gar nicht adressiert werden weil das noch gar nicht vorhanden ist.</p> <p>Also muss die HTML Datei ja doch geändert werden, nun gut. Die Frage ist, was würdet Ihr denn empfehlen, den Eventhandler <code>document.forms[0].addEventListener('submit', cc, false);</code> setzen oder das JS Script am Ende der HTML Datei einbinden?</p> <p>MfG</p> Welcher Button wurde geklickt Mon, 17 Dec 18 14:27:04 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738792#m1738792 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738792#m1738792 <p>he <a href="/users/6547" class="mention registered-user" rel="noopener noreferrer">@Rolf B</a></p> <p>funktioniert prima, danke! Ein <input> auf diese Art und Weise abzufragen geht auch.</p> <p>Sinn der Aktion ist es, die Anwendung mit JS benutzerfreundlicher zu machen und auf ein Formular aufzusetzen ohne letzeres ändern zu müssen.</p> <p>Also den Submit durch JS zu ersetzen. MfG</p> Welcher Button wurde geklickt Mon, 17 Dec 18 16:05:58 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738801#m1738801 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738801#m1738801 <p>ja <a href="/users/6547" class="mention registered-user" rel="noopener noreferrer">@Rolf B</a></p> <p>querySelector ist ein starkes Teil </p> <p><a href="http://rolfrost.de/cp2bin.html" rel="nofollow noopener noreferrer">Das wars dann auch</a>.</p> <p>Für die Einen Progressive Enhancement, für mich ein sinnvoller Zeitvertreib.</p> <p>Danke nochmal.</p> Welcher Button wurde geklickt Mon, 17 Dec 18 14:21:56 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738790#m1738790 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738790#m1738790 <p>Hallo beatovich,</p> <p>Problem ist das submit-Event, das hat das Form als currentTarget und kein Attribut, das den Auslöser des Submit verkündet. Oder hast Du was entdeckt was ich übersehen habe?</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> Welcher Button wurde geklickt Mon, 17 Dec 18 14:25:18 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738791#m1738791 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738791#m1738791 <p>hallo</p> <blockquote> <p>Hallo beatovich,</p> <p>Problem ist das submit-Event, das hat das Form als currentTarget und kein Attribut, das den Auslöser des Submit verkündet. Oder hast Du was entdeckt was ich übersehen habe?</p> </blockquote> <p>Mir gehts gar nicht um target oder current-target, sondern darum, dass der geklickte Button zu Formdata beiträgt.</p> <div class="signature">-- <br> <a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a> </div> Welcher Button wurde geklickt Mon, 17 Dec 18 14:51:48 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738795#m1738795 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738795#m1738795 <p>Hallo beatovich,</p> <p>auf meinem Chrome nicht. Ein input type="text" kommt, ein button oder input type="submit" nicht. Die Spec ist da etwas merkwürdig, sie reden dort von einem "submitter", der im FD eingetragen wird, und bei Stackoverflow meint jemand, der submitter sei undefiniert wenn das FormData aus JS manuell erzeugt wird. Hast Du andere Erkenntnisse?</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>POST<span class="token punctuation">"</span></span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/foo<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>input</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>foo<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>test<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">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>b1<span class="token punctuation">"</span></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>btn1<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Btn1<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">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>b2<span class="token punctuation">"</span></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>btn2<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Btn2<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">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>b3<span class="token punctuation">"</span></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>btn3<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Btn3<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>form</span><span class="token punctuation">></span></span> </code></pre> <pre><code class="block language-js">document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"form"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"submit"</span><span class="token punctuation">,</span> captureSubmit<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">captureSubmit</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> f <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">FormData</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>currentTarget<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">[</span><span class="token string">"foo"</span><span class="token punctuation">,</span> <span class="token string">"btn1"</span><span class="token punctuation">,</span> <span class="token string">"btn2"</span><span class="token punctuation">,</span> <span class="token string">"btn3"</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 parameter">name</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>name <span class="token operator">+</span> <span class="token string">": "</span> <span class="token operator">+</span> f<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Ausgabe:</p> <pre><code class="block">foo: bar btn1: null btn2: null btn3: null </code></pre> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> Welcher Button wurde geklickt Mon, 17 Dec 18 16:46:44 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738804#m1738804 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738804#m1738804 <p>hallo</p> <blockquote> <p>Mir gehts gar nicht um target oder current-target, sondern darum, dass der geklickte Button zu Formdata beiträgt.</p> </blockquote> <p>FormData ist hier gar nicht im Spiel. Vielmehr ist ein ganz normales <form> gegeben was 3 Submitbuttons hat die einen serverseitigen Prozess auslösen. Dafür wird der Default-Enctype benutzt und ansonsen haben sowohl die <input>-Felder als auch die Buttons jeweils name+value Attribute. Beim Submit geht also alles zusammen über den Default Enctype ab zum Server und der schickt ein mit dem Ergebnis gerendertes HTMLTemplate reture.</p> <p>Ziel meines heutigen Zeitvertreibes war es, den serverseitigen Prozess komplett durch einen clientseitigen Prozess zu ersetzen. Das heißt, daß man hierzu gar keinen Enctype braucht, weil die Eingaben den Browser nicht verlassen sondern an Ort und Stelle verarbeitet werden.</p> <p>MfG</p> Welcher Button wurde geklickt Mon, 17 Dec 18 14:57:11 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738796#m1738796 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738796#m1738796 <p>@@Rolf B</p> <blockquote> <p>Was mache ich falsch?</p> </blockquote> <p>U.a. <code class="language-javascript bad">document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"form"</span><span class="token punctuation">)</span></code> – wo das Ding doch schon mit <code class="language-javascript">document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span></code> zur Verfügung steht.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Welcher Button wurde geklickt Mon, 17 Dec 18 15:08:24 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738798#m1738798 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738798#m1738798 <p>hallo</p> <blockquote> <p>auf meinem Chrome nicht. Ein input type="text" kommt, ein button oder input type="submit" nicht. Die Spec ist da etwas merkwürdig, sie reden dort von einem "submitter", der im FD eingetragen wird, und bei Stackoverflow meint jemand, der submitter sei undefiniert wenn das FormData aus JS manuell erzeugt wird. Hast Du andere Erkenntnisse?</p> </blockquote> <p>Hab gleich selber getestet.</p> <pre><code class="block"><form onsubmit="console.log( new FormData(this) );return false;"> <input type="text" name="text" value="i am text"> <button type="submit" name="which_button" value="fred">Fred</button> </form> </code></pre> <p>Die Konsole zeigt nicht mal das Textfeld an.</p> <div class="signature">-- <br> <a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a> </div> Welcher Button wurde geklickt Mon, 17 Dec 18 17:00:53 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738806#m1738806 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738806#m1738806 <p>hi <a href="/users/6547" class="mention registered-user" rel="noopener noreferrer">@Rolf B</a></p> <blockquote> <p>auf meinem Chrome nicht. Ein input type="text" kommt, ein button oder input type="submit" nicht. Die Spec ist da etwas merkwürdig, sie reden dort von einem "submitter", der im FD eingetragen wird, und bei Stackoverflow meint jemand, der submitter sei undefiniert wenn das FormData aus JS manuell erzeugt wird. Hast Du andere Erkenntnisse?</p> </blockquote> <p><code>jQuery.serialize()</code> verhält sich genauso wie FD: <input type="submit"> und <button> werden nicht übernommen bzw. übertragen. Das ist ja auch logisch und gut so, wenn die allesamt übertragen würden könnte man die ja gar nicht mehr unterscheiden serverseitig.</p> <p>Was der bei Stackoverflow mit 'submitter' meinte, nenne ich Schlüsselparameter, also die legt der Entwickler fest und im Fall FD o.a. JS-Serializer sind die als name+value händisch anzuhängen, z.B. mit <code>FD.append();</code></p> <p>MfG</p> <p>PS: Schlüsselparameter serverseitig. Also welcher button gecklickt wurde:</p> <pre><code class="block language-perl"> <span class="token keyword">my</span> <span class="token variable">$self</span> <span class="token operator">=</span> shift<span class="token punctuation">;</span> <span class="token keyword">if</span><span class="token punctuation">(</span> <span class="token variable">$self</span><span class="token operator">-></span>param<span class="token punctuation">(</span><span class="token string">'cp2bin'</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">my</span> <span class="token variable">$cp</span> <span class="token operator">=</span> <span class="token variable">$self</span><span class="token operator">-></span>param<span class="token punctuation">(</span><span class="token string">'cp'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token variable">$self</span><span class="token operator">-></span><span class="token punctuation">{</span>STASH<span class="token punctuation">}</span><span class="token punctuation">{</span>cp<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token variable">$self</span><span class="token operator">-></span>trim<span class="token punctuation">(</span> <span class="token variable">$self</span><span class="token operator">-></span>ents<span class="token punctuation">(</span><span class="token variable">$cp</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token variable">$self</span><span class="token operator">-></span><span class="token punctuation">{</span>STASH<span class="token punctuation">}</span><span class="token punctuation">{</span>bin<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token variable">$self</span><span class="token operator">-></span>cp2bin<span class="token punctuation">(</span><span class="token variable">$cp</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token keyword">do</span><span class="token punctuation">{</span> <span class="token keyword">my</span> <span class="token variable">$f</span> <span class="token operator">=</span> <span class="token variable">$@</span> <span class="token operator">=~</span> <span class="token regex">/(.*?)at/</span> <span class="token operator">?</span> <span class="token variable">$1</span> <span class="token punctuation">:</span> <span class="token string">'Fehlerhafte Eingabe!'</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token variable">$self</span><span class="token operator">-></span>errmsg<span class="token punctuation">(</span><span class="token string">"$f"</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">elsif</span><span class="token punctuation">(</span><span class="token variable">$self</span><span class="token operator">-></span>param<span class="token punctuation">(</span><span class="token string">'bin2cp'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">my</span> <span class="token variable">$bin</span> <span class="token operator">=</span> <span class="token variable">$self</span><span class="token operator">-></span>param<span class="token punctuation">(</span><span class="token string">'bin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token variable">$self</span><span class="token operator">-></span><span class="token punctuation">{</span>STASH<span class="token punctuation">}</span><span class="token punctuation">{</span>bin<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token variable">$self</span><span class="token operator">-></span>trim<span class="token punctuation">(</span><span class="token variable">$self</span><span class="token operator">-></span>ents<span class="token punctuation">(</span><span class="token variable">$bin</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token variable">$self</span><span class="token operator">-></span><span class="token punctuation">{</span>STASH<span class="token punctuation">}</span><span class="token punctuation">{</span>cp<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token variable">$self</span><span class="token operator">-></span>bin2cp<span class="token punctuation">(</span><span class="token variable">$bin</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token keyword">do</span><span class="token punctuation">{</span> <span class="token keyword">my</span> <span class="token variable">$f</span> <span class="token operator">=</span> <span class="token variable">$@</span> <span class="token operator">=~</span> <span class="token regex">/(.*?)at/</span> <span class="token operator">?</span> <span class="token variable">$1</span> <span class="token punctuation">:</span> <span class="token string">'Fehlerhafte Eingabe!'</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token variable">$self</span><span class="token operator">-></span>errmsg<span class="token punctuation">(</span><span class="token string">"$f"</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">elsif</span><span class="token punctuation">(</span> <span class="token variable">$self</span><span class="token operator">-></span>param<span class="token punctuation">(</span><span class="token string">'re'</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token variable">$self</span><span class="token operator">-></span>redirect <span class="token punctuation">}</span> <span class="token keyword">else</span><span class="token punctuation">{</span> <span class="token variable">$self</span><span class="token operator">-></span>errmsg<span class="token punctuation">(</span><span class="token string">'Unbekannter Parameter!'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> </code></pre> Welcher Button wurde geklickt Wed, 19 Dec 18 07:32:18 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738989#m1738989 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738989#m1738989 <p>hi <a href="/users/6547" class="mention registered-user" rel="noopener noreferrer">@Rolf B</a></p> <p><a href="http://rolfrost.de/multipart_slice_data.html" rel="nofollow noopener noreferrer">hier</a> kannst Du legacy form-data und FormData nebeneinander testen. Der Submibutton hat name=control und value=1</p> <p>Übertragen wird dieses Pärchen nur bei einem native Submit also was der Browser selber tut. FormData nimmt den Buton nicht mit, da verhalten sich bei mir FF und Chrome gleich.</p> <p>MfG</p> Welcher Button wurde geklickt Mon, 17 Dec 18 16:56:51 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738805#m1738805 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738805#m1738805 <p>@@Gunnar Bittersmann</p> <p>Kann mir mal jemand erklären, warum man hier mit Minuspunkten überhauft wird, wenn man den Hinweis gibt, dass es wenig sinnvoll ist, die Nadel im Heuhaufen zu suchen, wenn man sie bereits in der Hand hält?</p> <p>Oder einfach bloß mausgerutscht?</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Welcher Button wurde geklickt Mon, 17 Dec 18 17:24:36 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738807#m1738807 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738807#m1738807 <p>hallo</p> <blockquote> <p>@@Gunnar Bittersmann</p> <p>Kann mir mal jemand erklären, warum man hier mit Minuspunkten überhauft wird, wenn man den Hinweis gibt, dass es wenig sinnvoll ist, die Nadel im Heuhaufen zu suchen, wenn man sie bereits in der Hand hält?</p> <p>Oder einfach bloß mausgerutscht?</p> </blockquote> <p>Nö. Aber nicht durch mich. Du sollst eben sprachlich wieder zurechtgerückt werden.</p> <p>Ich übrigens auch.</p> <div class="signature">-- <br> <a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a> </div> Welcher Button wurde geklickt Mon, 17 Dec 18 19:26:42 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738812#m1738812 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738812#m1738812 <p>Hallo Gunnar,</p> <p>Du wurdest von mir mit einem Minuspunkt überhäuft, weil du die Fragestellung klar erkannt und zielsicher missachtet hast.</p> <p>So was geht mir auf den Keks. Minus wie „für die Frage nicht hilfreich“.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> Welcher Button wurde geklickt Mon, 17 Dec 18 20:25:26 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738819#m1738819 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738819#m1738819 <p>Hallo pl,</p> <p>du wechselst das Thema. Serverseitig sind die Daten da, weil der Name des Submit-Buttons gepostet wird.</p> <p>Clientseitig finde ich das blöd gelöst - der Browser weiß ja ganz genau was den Submit ausgelöst hat (Beweis: Dein Perl-Script) und könnte es darum im submit-Handler auch den FormData bereitstellen. Nach meiner Recherche von heut nachmittag tat Chrome das wohl auch mal. Aber sie habe es in die 50ern <strong>ausgebaut</strong> und zwingt statt dessen die Entwickler zu einem anderen Konstrukt.</p> <p>Wenn Du mit einer serverseitigen Erkennung auskommst und es im JavaScript nicht brauchst, ist das ja auch eine Lösung.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> Welcher Button wurde geklickt Mon, 17 Dec 18 17:38:14 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738809#m1738809 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738809#m1738809 <p>@@beatovich</p> <blockquote> <p>Du sollst eben sprachlich wieder zurechtgerückt werden.</p> </blockquote> <p>1. Das mag ja sein.</p> <blockquote> <p>Ich übrigens auch.</p> </blockquote> <p>2. Das auch. </p> <p>3. Wird 1. kaum gelingen. </p> <p>4. <strong lang="en">Last, but not least:</strong> Ich sehe nichts, was in diesem Fall sprachlich wieder zurechtgerückt werden müsste.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Welcher Button wurde geklickt Mon, 17 Dec 18 19:50:16 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738813#m1738813 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738813#m1738813 <p>@@Rolf B</p> <blockquote> <p>Du wurdest von mir mit einem Minuspunkt überhäuft, weil du die Fragestellung klar erkannt und zielsicher missachtet hast. […] Minus wie „für die Frage nicht hilfreich“.</p> </blockquote> <p>Die Fragestellung hattest du mit Beat diskutiert; da wollte ich mich gar nicht reinhängen.</p> <blockquote> <p>So was geht mir auf den Keks.</p> </blockquote> <p>Dass man hier ungefragt Verbesserungsvorschläge bekommt, ist ein <strong>Feature</strong> dieses Forums, kein Bug. Es ist bedauerlich, wenn du das anders siehst.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Welcher Button wurde geklickt Mon, 17 Dec 18 19:55:03 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738814#m1738814 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738814#m1738814 <p>Ach Rolf …</p> <blockquote> <p>Minus wie „für die Frage nicht hilfreich“.</p> </blockquote> <p>… du weißt doch, „uns gibt es nur mit Meinung und ungebetener Beratung.“ — <a href="https://forum.selfhtml.org/cites/224" rel="noopener noreferrer">Chräcker</a></p> <p>Gunnars Hinweis mag dir bei deiner eigentlichen Frage nicht weitergeholfen haben, aber er war fachlich richtig. Deswegen einen Minuspunkt zu verteilen ist doch auch nicht sinnvoll. Hättest es ja auch einfach stehen lassen und ignorieren können. So habe ich mich gezwungen gesehen, deine −1 durch ein +1 meinerseits auszugleichen. :-)</p> <p>Was man in so einer Situation gerne übersieht ist, dass es sich hier um eine öffentliche Veranstaltung handelt. Man weiß nie, wer alles mitliest und gegebenenfalls Code ungeprüft übernimmt. Deswegen sind solche kleinen Hinweise durchaus wertvoll. Wenn nicht für dich, dann doch vielleicht für jemand anderes.</p> <p>Viele Grüße,</p> <p>Orlok</p> Welcher Button wurde geklickt Mon, 17 Dec 18 20:13:14 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738816#m1738816 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738816#m1738816 <p>hallo</p> <blockquote> <p>@@Rolf B</p> <blockquote> <p>Du wurdest von mir mit einem Minuspunkt überhäuft, weil du die Fragestellung klar erkannt und zielsicher missachtet hast. […] Minus wie „für die Frage nicht hilfreich“.</p> </blockquote> <p>Die Fragestellung hattest du mit Beat diskutiert; da wollte ich mich gar nicht reinhängen.</p> <blockquote> <p>So was geht mir auf den Keks.</p> </blockquote> <p>Dass man hier ungefragt Verbesserungsvorschläge bekommt, ist ein <strong>Feature</strong> dieses Forums, kein Bug. Es ist bedauerlich, wenn du das anders siehst.</p> </blockquote> <p>Ach komm, die rhetorische Komponente willst du aber jetzt nicht wegreden.</p> <p>Welche Verbesserung siehst du denn bei document.forms gegenüber querySelector?</p> <div class="signature">-- <br> <a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a> </div> Welcher Button wurde geklickt Wed, 19 Dec 18 08:25:37 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1739001#m1739001 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1739001#m1739001 <p>Im Selfwiki ist ja auch von Progressive Enhancment die Rede. Was jedoch fehlt sind ein paar Beispiele und Ideen für Lösungsansätze.</p> <p>Die Frage ob ein Form per document.forms oder querySelector adressiert wird, dürfte auf jeden Fall auch Bestandteil eines diesbezüglichen Wikiartikels sein.</p> <p>MfG</p> Welcher Button wurde geklickt Mon, 17 Dec 18 20:27:17 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738820#m1738820 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738820#m1738820 <p>@@beatovich</p> <blockquote> <p>Welche Verbesserung siehst du denn bei document.forms gegenüber querySelector?</p> </blockquote> <p>Das sagte ich doch schon: „dass es wenig sinnvoll ist, die Nadel im Heuhaufen zu suchen, wenn man sie bereits in der Hand hält“.</p> <ul> <li>die Nadel: das <code>form</code>-Elementobjekt</li> <li>der Heuhaufen: das DOM</li> <li>die Hand: <code>document.forms</code></li> </ul> <p>Unnütze Operationen auf dem DOM kosten sinnlos Ausführungszeit und Strom (Akku). Beides negative Auswirkungen für den Nutzer.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Welcher Button wurde geklickt Tue, 18 Dec 18 08:05:46 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738841#m1738841 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738841#m1738841 <p>Hi <a href="/users/6547" class="mention registered-user" rel="noopener noreferrer">@Rolf B</a></p> <blockquote> <p>du wechselst das Thema</p> </blockquote> <p>Nicht ich, sondern Beat und Du hatte das Thema gewechselt: Zu FormData!</p> <p>Infolgedessen ging es mir darum, darauf hinzuweisen, daß man seine Schlüsselparameter dem FormDataobjekt selbst hinzufügen muss. Weil</p> <ol> <li>new FormData(form) nur die Nutzdaten erfasst</li> <li>also nicht den name+value des geklickten Buttons</li> <li>Schlüsselparameter notwendig sind zur Ablaufsteuerung</li> </ol> <p>und es ohnehin gut ist, Nutzdaten von Schlüsselparametern zu trennen.</p> <p>In der <a href="http://rolfrost.de/cp2bin.html" rel="nofollow noopener noreferrer">hier dargestellten Anwendung</a> wird zwar nichts parametrisiert aber das Prinzip der Logik ist doch dasselbe:</p> <p>Herauszufinden welcher Button geklickt wurde.</p> <p>Womit wir wieder beim Thema wären. MfG</p> Welcher Button wurde geklickt Wed, 19 Dec 18 08:10:55 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738996#m1738996 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738996#m1738996 <p>hi <a href="/users/6547" class="mention registered-user" rel="noopener noreferrer">@Rolf B</a></p> <blockquote> <p>Wenn Du mit einer serverseitigen Erkennung auskommst und es im JavaScript nicht brauchst, ist das ja auch eine Lösung.</p> </blockquote> <p>Es geht immer um Beides! Egal ob ein serverseitiger oder clientseitiger Prozess gestartet werden soll, die Prozesskontrolle ist nur möglich wenn bekannt ist welcher Button geklickt wurde. Außerdem gibt es ja nicht nur name+value an Schaltflächen sondern auch in angehängten Querystrings in <a href>.</p> <p>MfG</p> Welcher Button wurde geklickt Mon, 17 Dec 18 20:45:30 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738821#m1738821 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738821#m1738821 <p>hallo</p> <blockquote> <p>@@beatovich</p> <blockquote> <p>Welche Verbesserung siehst du denn bei document.forms gegenüber querySelector?</p> </blockquote> <p>Das sagte ich doch schon: „dass es wenig sinnvoll ist, die Nadel im Heuhaufen zu suchen, wenn man sie bereits in der Hand hält“.</p> <ul> <li>die Nadel: das <code>form</code>-Elementobjekt</li> <li>der Heuhaufen: das DOM</li> <li>die Hand: <code>document.forms</code></li> </ul> <p>Unnütze Operationen auf dem DOM kosten sinnlos Ausführungszeit und Strom (Akku). Beides negative Auswirkungen für den Nutzer.</p> </blockquote> <p>Da magst du recht haben im konkreten Fall. Im praktischen Fall wird man aber ein bestimmtes Formular nicht anhand eines form indexes suchen. Das wäre sehr unzuverlässig.</p> <div class="signature">-- <br> <a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a> </div> Welcher Button wurde geklickt Tue, 18 Dec 18 06:37:37 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738832#m1738832 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738832#m1738832 <p>Tach!</p> <blockquote> <blockquote> <p>Welche Verbesserung siehst du denn bei document.forms gegenüber querySelector?</p> </blockquote> <p>Das sagte ich doch schon: „dass es wenig sinnvoll ist, die Nadel im Heuhaufen zu suchen, wenn man sie bereits in der Hand hält“.</p> <ul> <li>die Nadel: das <code>form</code>-Elementobjekt</li> <li>der Heuhaufen: das DOM</li> <li>die Hand: <code>document.forms</code></li> </ul> </blockquote> <p>Hier formulierst du die Sache deutlich angemessener als im ersten Posting, als du es als Fehler dargestellt hast. Eine Vorgehensweise, die zum selben Ergebnis kommt wie eine andere, kann nicht falsch sein. Beide sind gleichermaßen effektiv. Sie können sich aber in der Effizienz unterscheiden.</p> <blockquote> <p>Unnütze Operationen auf dem DOM kosten sinnlos Ausführungszeit und Strom (Akku). Beides negative Auswirkungen für den Nutzer.</p> </blockquote> <p>Fällt der Unterschied so deutlich aus? Ist es wirklich so, dass der Browser die o.g. Strukturen direkt vorhält und nicht erst beim Zugreifen on-the-fly erzeugt? Und muss für IDs ständig das DOM geparst werden, ohne dass er eine interne Liste pflegt?</p> <p>dedlfix.</p> Welcher Button wurde geklickt Mon, 17 Dec 18 21:08:45 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738822#m1738822 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738822#m1738822 <p>Hallo beatovich</p> <blockquote> <p>Da magst du recht haben im konkreten Fall. Im praktischen Fall wird man aber ein bestimmtes Formular nicht anhand eines form indexes suchen. Das wäre sehr unzuverlässig.</p> </blockquote> <p>Muss man ja auch nicht.</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</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>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p>Wenn du dem Form eine ID gibst, kannst du es in der von <code class="language-javascript">document<span class="token punctuation">.</span>forms</code> zurückgegebenen HTMLCollection auch darüber ansprechen:</p> <pre><code class="block language-javascript"><span class="token keyword">const</span> form <span class="token operator">=</span> document<span class="token punctuation">.</span>forms<span class="token punctuation">.</span>name<span class="token punctuation">;</span> </code></pre> <p>Wenn die ID Zeichen enthält, die in Eigenschaftsnamen nicht erlaubt sind, kannst du die Klammernotation verwenden:</p> <pre><code class="block language-javascript"><span class="token keyword">const</span> form <span class="token operator">=</span> document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span><span class="token string">'namespace-name'</span><span class="token punctuation">]</span><span class="token punctuation">;</span> </code></pre> <p>Die beiden Varianten mit Index oder ID auf das <code>form</code> zuzugreifen korrespondieren mit den beiden Methoden <code>item</code> und <code>namedItem</code> der HTMLCollection-Schnittstelle. Du könntest also auch schreiben:</p> <pre><code class="block language-javascript"><span class="token keyword">const</span> form <span class="token operator">=</span> document<span class="token punctuation">.</span>forms<span class="token punctuation">.</span><span class="token function">namedItem</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Wäre aber unnötig umständlich.</p> <p>Nebenbei bemerkt ist <code class="language-javascript">document<span class="token punctuation">.</span>forms</code> nicht die einzige nützliche Sammlung von Elementen.</p> <p>Unter anderen gibt es noch:</p> <ul> <li> <p><code class="language-javascript">document<span class="token punctuation">.</span>scripts</code> gibt eine Sammlung der Skriptelemente.</p> </li> <li> <p><code class="language-javascript">document<span class="token punctuation">.</span>images</code> gibt eine Sammlung der Bilder.</p> </li> <li> <p><code class="language-javascript">document<span class="token punctuation">.</span>links</code> sammelt <code>a</code> und <code>area</code>-Elemente mit <code>href</code>-Attribut.</p> </li> </ul> <p>Siehe auch <a href="https://www.w3.org/TR/html53/dom.html#the-document-object" rel="nofollow noopener noreferrer">3.1.1 The <code>document</code> Object</a>.</p> <p>Viele Grüße,</p> <p>Orlok</p> Welcher Button wurde geklickt Mon, 17 Dec 18 21:20:10 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738823#m1738823 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738823#m1738823 <p>hallo</p> <p>Der vollständigkeit halber: Jede id im HTML erzeugt eine Elementreferenz innerhalb des window Objekts. Ob das einem gefällt, ist aber eine andere Frage.</p> <div class="signature">-- <br> <a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a> </div> Welcher Button wurde geklickt Mon, 17 Dec 18 21:28:59 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738824#m1738824 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738824#m1738824 <p>@@Orlok</p> <blockquote> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</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>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p>Wenn du dem Form eine ID gibst</p> </blockquote> <p>Ich hätte gesagt: Wenn du Dem Formular einen Namen gibst.</p> <blockquote> <p>kannst du es in der von <code class="language-javascript">document<span class="token punctuation">.</span>forms</code> zurückgegebenen HT.MLCollection auch darüber ansprechen:</p> <pre><code class="block language-javascript"><span class="token keyword">const</span> form <span class="token operator">=</span> document<span class="token punctuation">.</span>forms<span class="token punctuation">.</span>name<span class="token punctuation">;</span> </code></pre> </blockquote> <p>Aber in der Tat, ID geht auch. <code>document.forms.<name></code> nimmt dasjenige Fomular, was zuerst im DOM gefunden wird, egal ob mit <code>id="<name>"</code> oder <code>name="<name>"</code>.</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</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>foo<span class="token punctuation">"</span></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>bar<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>form</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 attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bar<span class="token punctuation">"</span></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>foo<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>form</span><span class="token punctuation">></span></span> </code></pre> <pre><code class="block language-javascript">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>forms<span class="token punctuation">.</span>foo<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// foo</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>forms<span class="token punctuation">.</span>bar<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// foo</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>forms<span class="token punctuation">.</span>foo<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// bar</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>forms<span class="token punctuation">.</span>bar<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// bar</span> </code></pre> <p><strong>Nachtrag:</strong> im Firefox ist das so.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Welcher Button wurde geklickt Tue, 18 Dec 18 15:36:50 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738947#m1738947 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738947#m1738947 <p>hallo</p> <blockquote> <p>Der vollständigkeit halber: Jede id im HTML erzeugt eine Elementreferenz innerhalb des window Objekts. Ob das einem gefällt, ist aber eine andere Frage.</p> </blockquote> <p>Progressive Enhancement eines Formulars kann ja auch nicht sein, daß man das ganze <form> hinsichtlich dessen überarbeitet und mit IDs bestickt. PE muss mit dem funktionieren was vorhanden ist und zwar so, daß man es eben nicht verändern muss. Ergo kann man nicht davon ausgehen, daß das <form> per ID adressierbar ist.</p> <p>Und idealerweise wird JS auch nicht ins HTML getippt sondern über eine externe Datei eingebunden.</p> <p>Das ist ja das was hier auch tagtäglich gepredigt wird. Da hab ich es nunmalso gemacht und schon geht das Geschrei wieder los.</p> <p>Aber danke an Deinen Eidgenossen Erich von Zofingen der in solchen Dingen stets zu sagen pflegte: Ein Kritiker ist wie eine Henne die gackert wenn andere Hühner Eier legen.</p> <p>MfG</p> Welcher Button wurde geklickt Mon, 17 Dec 18 21:37:33 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738825#m1738825 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738825#m1738825 <p>@@Gunnar Bittersmann</p> <blockquote> <p>Aber in der Tat, ID geht auch. <code>document.forms.<name></code> nimmt dasjenige Fomular, was zuerst im DOM gefunden wird, egal ob mit <code>id="<name>"</code> oder <code>name="<name>"</code>.</p> <p><strong>Nachtrag:</strong> im Firefox ist das so.</p> </blockquote> <p>In Safari und Chrome hingegen:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</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>foo<span class="token punctuation">"</span></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>bar<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>form</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 attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bar<span class="token punctuation">"</span></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>foo<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>form</span><span class="token punctuation">></span></span> </code></pre> <pre><code class="block language-javascript">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>forms<span class="token punctuation">.</span>foo<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// foo</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>forms<span class="token punctuation">.</span>bar<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// bar</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>forms<span class="token punctuation">.</span>foo<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// bar </span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>forms<span class="token punctuation">.</span>bar<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// foo</span> </code></pre> <p>WebKits und Chromium präferieren ID gegenüber Namen.</p> <p>Hm, welches Verhalten ist nun jetzt das richtige? #lazyweb</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Welcher Button wurde geklickt Mon, 17 Dec 18 21:53:13 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738826#m1738826 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738826#m1738826 <p>hallo</p> <blockquote> <p>@@Gunnar Bittersmann</p> <blockquote> <p>Aber in der Tat, ID geht auch. <code>document.forms.<name></code> nimmt dasjenige Fomular, was zuerst im DOM gefunden wird, egal ob mit <code>id="<name>"</code> oder <code>name="<name>"</code>.</p> <p><strong>Nachtrag:</strong> im Firefox ist das so.</p> </blockquote> <p>In Safari und Chrome hingegen:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</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>foo<span class="token punctuation">"</span></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>bar<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>form</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 attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bar<span class="token punctuation">"</span></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>foo<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>form</span><span class="token punctuation">></span></span> </code></pre> <pre><code class="block language-javascript">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>forms<span class="token punctuation">.</span>foo<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// foo</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>forms<span class="token punctuation">.</span>bar<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// bar</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>forms<span class="token punctuation">.</span>foo<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// bar </span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>forms<span class="token punctuation">.</span>bar<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// foo</span> </code></pre> <p>WebKits und Chromium präferieren ID gegenüber Namen.</p> </blockquote> <p>Du kannst auch gegentesten ohne Bezug auf forms:</p> <pre><code class="block language-javascript"> <span class="token comment">// Firefox</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>foo<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// foo</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>bar<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// bar</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>foo<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// bar </span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>bar<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// foo</span> </code></pre> <p>Dass name eine Referenz direkt in window erzeugt, ist speziell für das form Element.</p> <div class="signature">-- <br> <a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a> </div> Welcher Button wurde geklickt Tue, 18 Dec 18 08:03:33 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738840#m1738840 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738840#m1738840 <p>@@dedlfix</p> <blockquote> <p>Hier formulierst du die Sache deutlich angemessener als im ersten Posting, als du es als Fehler dargestellt hast.</p> </blockquote> <p>Das ist es auch. Es ist eine falsche Vorgehensweise; es ist ein Fehler. Kein syntaktischer, aber ein methodischer.</p> <p>Zu Falschem sage ich „falsch“, einen Fehler nenne ich einen Fehler. Da irgendwas schönzureden ist nicht mein Ding.</p> <blockquote> <p>Eine Vorgehensweise, die zum selben Ergebnis kommt wie eine andere, kann nicht falsch sein.</p> </blockquote> <p>Riesige Löcher in die Erde reißen, Braunkohle abbaggern, um sie im Kraftwerk zu verheizen, kann nicht falsch sein? Kommt ja zum selben Ergebnis wie Windräder und Photovoltaik: Strom in der Steckdose. Merkste selber, dass deine Argumentation falsch ist?</p> <blockquote> <blockquote> <p>Unnütze Operationen auf dem DOM kosten sinnlos Ausführungszeit und Strom (Akku). Beides negative Auswirkungen für den Nutzer.</p> </blockquote> <p>Fällt der Unterschied so deutlich aus?</p> </blockquote> <p>Je nach Größe des DOMs.</p> <p>Aber es geht nicht mal darum, wie groß der Unterschied ist, sondern Unnötiges prinzipiell zu vermeiden. Es wäre sinnlos, verschiedene Programmiertechniken zu meistern: eine gute für großes DOM und eine schludrige für kleines.</p> <p>Und es geht wohlgemerkt auch nicht darum, durch Mikrooptimierung die Lesbarkeit des Codes zu verschlechtern. Das sollte man nicht tun.</p> <blockquote> <p>Ist es wirklich so, dass der Browser die o.g. Strukturen direkt vorhält und nicht erst beim Zugreifen on-the-fly erzeugt?</p> </blockquote> <p>Natürlich hält der Browser die Strukturen vor: das DOM. In dieser Struktur will ein Element aber erstmal gefunden werden.</p> <blockquote> <p>Und muss für IDs ständig das DOM geparst werden, ohne dass er eine interne Liste pflegt?</p> </blockquote> <p>Bei IDs hast du wohl einen Punkt. Darum ging’s hier aber nicht.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Welcher Button wurde geklickt Tue, 18 Dec 18 09:26:04 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738851#m1738851 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738851#m1738851 <p>Tach!</p> <blockquote> <blockquote> <p>Hier formulierst du die Sache deutlich angemessener als im ersten Posting, als du es als Fehler dargestellt hast.</p> </blockquote> <p>Das ist es auch. Es ist eine falsche Vorgehensweise; es ist ein Fehler. Kein syntaktischer, aber ein methodischer.</p> </blockquote> <p>Das ist nur eine Aussage, aber kein Beweis in der Sache.</p> <blockquote> <blockquote> <p>Eine Vorgehensweise, die zum selben Ergebnis kommt wie eine andere, kann nicht falsch sein.</p> </blockquote> <p>Riesige Löcher in die Erde reißen, Braunkohle abbaggern, um sie im Kraftwerk zu verheizen, kann nicht falsch sein? Kommt ja zum selben Ergebnis wie Windräder und Photovoltaik: Strom in der Steckdose. Merkste selber, dass deine Argumentation falsch ist?</p> </blockquote> <p>Es wäre sehr nett, wenn du mir überlassen würdest, was ich merke und was nicht, danke. Ich sehe hier, den Vergleich einer Technik mit deren Nebenwirkungen zu einer anderen Technik, ohne Nebenwirkungen zu betrachten. Das trägt für mich nichts in der Sache bei.</p> <p>In der eigentlichen Argumentation war auch nicht von Nebenwirkungen die Rede. Wenn also die Nebenwirkungen zum Effekt hinzugezählt werden sollen, dann ist es sicherlich günstig, sie auch zu benennen, damit nicht nur zwei beleglose Aussagen gegenüberstehen.</p> <blockquote> <blockquote> <blockquote> <p>Unnütze Operationen auf dem DOM kosten sinnlos Ausführungszeit und Strom (Akku). Beides negative Auswirkungen für den Nutzer.</p> </blockquote> <p>Fällt der Unterschied so deutlich aus?</p> </blockquote> <p>Je nach Größe des DOMs.</p> <p>Aber es geht nicht mal darum, wie groß der Unterschied ist, sondern Unnötiges prinzipiell zu vermeiden. Es wäre sinnlos, verschiedene Programmiertechniken zu meistern: eine gute für großes DOM und eine schludrige für kleines.</p> </blockquote> <p>Definiere unnötig. Wenn ich lediglich die Oberfläche betrachte, ohne das zu berücksichtigen, was im Verborgenen nötig ist, wie kann ich dann das Ergebnis beurteilen?</p> <blockquote> <blockquote> <p>Ist es wirklich so, dass der Browser die o.g. Strukturen direkt vorhält und nicht erst beim Zugreifen on-the-fly erzeugt?</p> </blockquote> <p>Natürlich hält der Browser die Strukturen vor: das DOM. In dieser Struktur will ein Element aber erstmal gefunden werden.</p> </blockquote> <p>Ja, und das ist beim Zugriff über <code>document.forms</code> inwiefern nicht nötig? Wenn der Browser beim Parsen des Dokuments bereits diese Verknüpfungen angelegt hat, dann kann er das genauso für die IDs der Elemente tun. In beiden Fällen kann auch das Gegenteil zutreffen, dass nichts vorab angelegt wurde und bei jedem Zugriff das DOM durchsucht wird, dass also <code>document.forms</code> lediglich syntactic sugar ist.</p> <p>Ich weiß es nicht, was am Ende der Fall ist, deswegen hake ich hier nach, damit ich mir ein Bild machen kann zum "falsch" oder vielleicht doch nicht.</p> <blockquote> <blockquote> <p>Und muss für IDs ständig das DOM geparst werden, ohne dass er eine interne Liste pflegt?</p> </blockquote> <p>Bei IDs hast du wohl einen Punkt. Darum ging’s hier aber nicht.</p> </blockquote> <p>Was für IDs gilt, kann prinzipiell auch für Elemente gelten, noch dazu bei solchen, für die es bereits eine Zugriffsabkürzung gibt. Wer sagt denn, dass <code>document.querySelector('form')</code> das DOM durchsucht und nicht vielleicht eine Abkürzung über <code>document.forms</code> nimmt?</p> <p>dedlfix.</p> document.querySelector vs document.forms Benchmark Wed, 19 Dec 18 10:26:32 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1739015#m1739015 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1739015#m1739015 <blockquote> <blockquote> <blockquote> <p>Unnütze Operationen auf dem DOM kosten sinnlos Ausführungszeit und Strom (Akku). Beides negative Auswirkungen für den Nutzer.</p> </blockquote> <p>Fällt der Unterschied so deutlich aus?</p> </blockquote> <p>Je nach Größe des DOMs.</p> </blockquote> <p>In diesem Fall, ist der Unterschied in der Tat bemerkenswert.</p> <p><a href="https://jsperf.com/queryselectorvsforms/3" rel="nofollow noopener noreferrer">JSPerf Benchmark</a></p> <p>Es gibt aber auch einen semantischen Unterschied, <code>document.forms</code> liefert eine HTMLCollection, das ist potenziell anfälliger für Fehler als eine NodeList, die man durch <code>document.querySelectorAll</code> bekommt, weil sie sich automatisch aktualisiert, wenn sich das DOM ändert.</p> Welcher Button wurde geklickt Tue, 18 Dec 18 08:40:58 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738842#m1738842 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738842#m1738842 <p>@@pl</p> <p>Dein Postin war erneut falsch formatiert:</p> <p><img src="/images/413c8154-fd44-4f56-bb82-954188008605.png" alt="" loading="lazy"></p> <p>Ich hab das mal wieder berichtigt. Wäre schön, wenn du das selbst hinbekämst.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Welcher Button wurde geklickt Tue, 18 Dec 18 09:50:06 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738856#m1738856 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738856#m1738856 <p>@@dedlfix</p> <blockquote> <blockquote> <p>Natürlich hält der Browser die Strukturen vor: das DOM. In dieser Struktur will ein Element aber erstmal gefunden werden.</p> </blockquote> <p>Ja, und das ist beim Zugriff über <code>document.forms</code> inwiefern nicht nötig?</p> </blockquote> <p>Zum einen ist das eine ein Baum, das andere eine Liste. Entscheidender dürfte aber sein, dass das eine ein Heuhaufen ist, das andere nur ganz wenige Halme.</p> <blockquote> <p>Wer sagt denn, dass <code>document.querySelector('form')</code> das DOM durchsucht und nicht vielleicht eine Abkürzung über <code>document.forms</code> nimmt?</p> </blockquote> <p>Das wäre denkbar. Da steckt aber ein „Vielleicht“ drin. Kein Grund, als Programmierer auf diese hypothetische Möglichkeit zu setzen und nicht selbst die Abkürzung einzuschlagen.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Welcher Button wurde geklickt Tue, 18 Dec 18 10:15:15 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738868#m1738868 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738868#m1738868 <p>Tach!</p> <blockquote> <blockquote> <p>Wer sagt denn, dass <code>document.querySelector('form')</code> das DOM durchsucht und nicht vielleicht eine Abkürzung über <code>document.forms</code> nimmt?</p> </blockquote> <p>Das wäre denkbar. Da steckt aber ein „Vielleicht“ drin. Kein Grund, als Programmierer auf diese hypothetische Möglichkeit zu setzen und nicht selbst die Abkürzung einzuschlagen.</p> </blockquote> <p>Ich habe da zwar ein Vielleicht drin, aber in deiner Aussage steckt auch noch kein Beweis, dass document.forms bereits zugriffsfertig existiert. Es ist erstmal nur augenscheinlich vorhanden.</p> <p>dedlfix.</p> Welcher Button wurde geklickt Wed, 19 Dec 18 08:00:46 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738993#m1738993 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738993#m1738993 <p>@@dedlfix</p> <blockquote> <p>Ich habe da zwar ein Vielleicht drin, aber in deiner Aussage steckt auch noch kein Beweis, dass document.forms bereits zugriffsfertig existiert. Es ist erstmal nur augenscheinlich vorhanden.</p> </blockquote> <p>Hm, ich sagte: <code>document.forms</code> > <code>document.querySelector('form')</code> (wobei > für „besser als“ steht).</p> <p>Du meinst, dass <code>document.querySelector('form')</code> genauso gut sein könnte, wenn das intern auf <code>document.forms</code> zurückgreift. (Ein Methodenaufruf mehr sei geschenkt.)</p> <p>Oder dass <code>document.forms</code> genauso schlecht sein könnte, weil beim Parsen des Dokuments gar keine Liste der vorhandenen Formulare angelegt wird, sondern erst bei Bedarf im Heuhaufen genannnt DOM gesucht wird.</p> <p>Also dass gilt <code>document.forms</code> ≥ <code>document.querySelector('form')</code>.</p> <p>Beides halte ich für sehr unwahrscheinlich, wobei ich ersterem noch mehr Chancen einräumen würde. Man kann es ohne in die JS-Engine-Interna reinzuschauen nicht gänzlich ausschließen, ich würde aber meinen Arsch verwetten, dass das Gleichheitszeichen nicht gilt.</p> <p>Auf keinen Fall gilt aber <code>document.forms</code> < <code>document.querySelector('form')</code>.</p> <p>Ich halte meine Empfehlung aufrecht, <code class="good">document.forms</code> zu verwenden und nicht <code class="bad">document.querySelector('form')</code>.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Welcher Button wurde geklickt Tue, 18 Dec 18 15:49:34 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738949#m1738949 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738949#m1738949 <p>hallo</p> <blockquote> <blockquote> <p>Der vollständigkeit halber: Jede id im HTML erzeugt eine Elementreferenz innerhalb des window Objekts. Ob das einem gefällt, ist aber eine andere Frage.</p> </blockquote> <p>Progressive Enhancement eines Formulars kann ja auch nicht sein, daß man das ganze <form> hinsichtlich dessen überarbeitet und mit IDs bestickt. PE muss mit dem funktionieren was vorhanden ist und zwar so, daß man es eben nicht verändern muss. Ergo kann man nicht davon ausgehen, daß das <form> per ID adressierbar ist.</p> </blockquote> <p>Doch, davon sollst du ausgehen, wenn im form Element eine id definiert ist.</p> <p>Ich will aber nicht empfehlen alles mit id-Attributen zu bestücken. Im Gegenteil. Aber der Betriebssicherheit halber kommt man nicht darum herum, einmaligen Komponenten eine ID in irgend einer Form zu geben.</p> <blockquote> <p>Und idealerweise wird JS auch nicht ins HTML getippt sondern über eine externe Datei eingebunden.</p> </blockquote> <p>Das spielt keine Rolle für das Verhalten.</p> <div class="signature">-- <br> <a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a> </div> Welcher Button wurde geklickt Wed, 19 Dec 18 07:58:44 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738992#m1738992 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738992#m1738992 <p>hallo</p> <blockquote> <p>Doch, davon sollst du ausgehen, wenn im form Element eine id definiert ist.</p> </blockquote> <p>für Progressive Enhancement ist es unerheblich auf welche Art und Weise das Formular selektiert wird.</p> <blockquote> <blockquote> <p>Und idealerweise wird JS auch nicht ins HTML getippt sondern über eine externe Datei eingebunden. Das spielt keine Rolle für das Verhalten.</p> </blockquote> </blockquote> <p>Hinsichtlich native PE ist das auch egal. Es hängen jedoch eine ganze Reihe weitere Dinge dran wie z.B. Konfigurierbarkeit, Wartbarkeit, Skalierbarkeit, Lesbarkeit, Teamarbeit, Wirtschaftlichkeit um nur ein paar zu nennen.</p> <p>MfG</p> Welcher Button wurde geklickt Wed, 19 Dec 18 08:07:30 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738994#m1738994 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738994#m1738994 <p>Hallo Gunnar Bittersmann,</p> <blockquote> <p>Ich halte meine Empfehlung aufrecht, <code class="good">document.forms</code> zu verwenden und nicht <code class="bad">document.querySelector('form')</code>.</p> </blockquote> <p>Auch wenn in Emp<em>fehl</em>ung der <em>Fehl</em>er mit drinzustecken scheint, ist diese Aussage um Längen besser und netter als der Stein des Anstoßes.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Pantoffeltierchen haben keine Hobbys. </div> Welcher Button wurde geklickt Wed, 19 Dec 18 08:10:13 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738995#m1738995 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738995#m1738995 <p>Tach!</p> <blockquote> <p>Ich halte meine Empfehlung aufrecht, <code class="good">document.forms</code> zu verwenden und nicht <code class="bad">document.querySelector('form')</code>.</p> </blockquote> <p>Das ist ja auch ok so, das als Empfehlung auszusprechen. Ich würde das auch so verwenden, wenn ich dazu Bedarf hätte. Der Stein des Anstoßes war, den querySelector als falsch hinzustellen, ohne dafür einen Beleg beibringen zu können. Es war vielleicht nur eine flapsige Formulierung, inspiriert durch die Frage von Rolf B. Aber wie du siehst, kam sie genausowenig gut bei ihm an, wie die Minusbewertung dafür bei dir.</p> <p>dedlfix.</p> Welcher Button wurde geklickt Wed, 19 Dec 18 08:17:58 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738998#m1738998 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1738998#m1738998 <p>@@dedlfix</p> <blockquote> <blockquote> <p>Ich halte meine Empfehlung aufrecht, <code class="good">document.forms</code> zu verwenden und nicht <code class="bad">document.querySelector('form')</code>.</p> </blockquote> <p>Das ist ja auch ok so, das als Empfehlung auszusprechen.</p> </blockquote> <p>Wer meiner Empfehlung nicht folgt, der begeht einen Fehler. </p> <p>Ernsthaft: Ich halte deine Einwände für so unwahrscheinlich, dass ich die Verwendung von <code>document.querySelector('form')</code> hier weiterhin als Fehler ansehe.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Welcher Button wurde geklickt Wed, 19 Dec 18 09:48:30 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1739011#m1739011 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1739011#m1739011 <p>Hallo Gunnar,</p> <p>es juckt mich ja, an dein Podest noch ein Minus zu kleben.</p> <p>Ich erkenne durchaus an, dass <code>document.forms</code> hier der bessere Weg ist. Kürzerer Code, kein magic string, und sehr wahrscheinlich auch schnellere Laufzeit. <code>querySelector</code> ist also weniger effizient.</p> <p>Aber: Ineffektiv = Fehler ≠ Ineffizient</p> <p>Dass <code>querySelector('form')</code> ineffektiv sei, das wirst Du nicht behaupten wollen. Es wäre ineffektiv, wenn das Dokument mehrere Forms enthielte und ich eigentlich das zweite Form bräuchte. Das war hier aber nicht Thema.</p> <p>(<a href="/users/1" class="mention registered-user" rel="noopener noreferrer">@Christian Kruse</a>: Wieso lässt das Forum das ! bzw : stehen, wenn ich != oder := tippe und im Sonderzeichen-Popup das ≠ oder ≈ auswähle?)</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> Welcher Button wurde geklickt Wed, 19 Dec 18 08:32:16 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1739003#m1739003 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1739003#m1739003 <p>Tach!</p> <blockquote> <p>Im Selfwiki ist ja auch von Progressive Enhancment die Rede. Was jedoch fehlt sind ein paar Beispiele und Ideen für Lösungsansätze.</p> <p>Die Frage ob ein Form per document.forms oder querySelector adressiert wird, dürfte auf jeden Fall auch Bestandteil eines diesbezüglichen Wikiartikels sein.</p> </blockquote> <p>Inwiefern siehst du da ein Progressive Enhancement? document.forms ist uralt. document.querySelector() ist zwar jünger (außerdem gibts noch das ebenfalls uralte document.getElementsByName()), aber das zu verwenden bringt keinerlei Vorteil im Sinne von Verbesserung in neueren Browsern gegenüber der bisherigen Technik (eventuelle Unterschiede in den internen Implementierungen nicht weiter beachtend).</p> <p>dedlfix.</p> Welcher Button wurde geklickt Wed, 19 Dec 18 10:22:48 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1739014#m1739014 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1739014#m1739014 <p>Hallo Rolf,</p> <blockquote> <p>(<a href="/users/1" class="mention registered-user" rel="noopener noreferrer">@Christian Kruse</a>: Wieso lässt das Forum das ! bzw : stehen, wenn ich != oder := tippe und im Sonderzeichen-Popup das ≠ oder ≈ auswähle?)</p> </blockquote> <p>Weil der Trigger-Charakter das <code>=</code> ist.</p> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> document.querySelector vs document.forms Benchmark Wed, 19 Dec 18 11:18:24 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1739019#m1739019 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1739019#m1739019 <p>Tach!</p> <blockquote> <blockquote> <blockquote> <blockquote> <p>Unnütze Operationen auf dem DOM kosten sinnlos Ausführungszeit und Strom (Akku). Beides negative Auswirkungen für den Nutzer.</p> </blockquote> <p>Fällt der Unterschied so deutlich aus?</p> </blockquote> <p>Je nach Größe des DOMs.</p> </blockquote> <p>In diesem Fall, ist der Unterschied in der Tat bemerkenswert.</p> <p><a href="https://jsperf.com/queryselectorvsforms/3" rel="nofollow noopener noreferrer">JSPerf Benchmark</a></p> </blockquote> <p>Das ist doch mal eine Aussage. Da gibts also noch Potential, ähnlich wie bei den IDs, einen Index aufzubauen. Ob sich das lohnt, ist eine andere Frage, die die Browserhersteller vermutlich besser beantworten können. Wie sieht aber der Unterschied aus, wenn das Formular per ID gesucht wird?</p> <p>dedlfix.</p> document.querySelector vs document.forms Benchmark Wed, 19 Dec 18 13:16:12 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1739056#m1739056 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1739056#m1739056 <p>@@1unitedpower</p> <blockquote> <p>Es gibt aber auch einen semantischen Unterschied, <code>document.forms</code> liefert eine HTMLCollection, das ist potenziell anfälliger für Fehler als eine NodeList, die man durch <code>document.querySelectorAll</code> bekommt, weil sie sich automatisch aktualisiert, wenn sich das DOM ändert.</p> </blockquote> <p>Das wäre nur dann relevant, wenn man Formulare mit JavaScript ins DOM hängt. Wenn man aber das tut und sich die Referenzen darauf nicht merkt, sondern wenn man ein Formular später wieder braucht, sich das aus dem DOM raussucht, dann macht man auch was ziemlich falsch.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> document.querySelector vs document.forms Benchmark Wed, 19 Dec 18 17:28:12 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1739077#m1739077 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1739077#m1739077 <p>Hallo 1unitedpower,</p> <blockquote> <p>Es gibt aber auch einen semantischen Unterschied, <code>document.forms</code> liefert eine HTMLCollection, das ist potenziell anfälliger für Fehler als eine NodeList, die man durch <code>document.querySelectorAll</code> bekommt, weil sie sich automatisch aktualisiert, wenn sich das DOM ändert.</p> </blockquote> <p>Naja, es ist wohl eher nicht davon auszugehen, dass auf einer Seite vogelwild Förmchen-Wechsel-Dich gespielt wird.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Pantoffeltierchen haben keine Hobbys. </div> In Sachen Progressive Enhancement Wed, 19 Dec 18 14:22:52 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1739063#m1739063 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1739063#m1739063 <p>Hallo pl,</p> <blockquote> <p>habe ich <a href="http://rolfrost.de/cp2bin.html" rel="nofollow noopener noreferrer">hier</a> den gesamten JS Code ausgelagert.</p> </blockquote> <p>Man sieht leider keine JS-Datei.</p> <blockquote> <p>Nun, wenn diese JS Datei im <head>-Bereich geladen wird, kann ja das <form> gar nicht adressiert werden weil das noch gar nicht vorhanden ist.</p> <p>Also muss die HTML Datei ja doch geändert werden, nun gut.</p> </blockquote> <p>Warum?</p> <pre><code class="block language-js">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> init<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">/* */</span> <span class="token punctuation">}</span> </code></pre> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Pantoffeltierchen haben keine Hobbys. </div> document.querySelector vs document.forms Benchmark Wed, 19 Dec 18 18:52:09 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1739085#m1739085 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1739085#m1739085 <p>@@Matthias Apsel</p> <blockquote> <blockquote> <p>Es gibt aber auch einen semantischen Unterschied, <code>document.forms</code> liefert eine HTMLCollection, das ist potenziell anfälliger für Fehler als eine NodeList, die man durch <code>document.querySelectorAll</code> bekommt, weil sie sich automatisch aktualisiert, wenn sich das DOM ändert.</p> </blockquote> <p>Naja, es ist wohl eher nicht davon auszugehen, dass auf einer Seite vogelwild Förmchen-Wechsel-Dich gespielt wird.</p> </blockquote> <p>Naja, bei einer SPA passiert das schon.</p> <p>Aber wie gesagt, ist auch dann die Verwendung von <code>document.querySelector</code> / <code>document.querySelectorAll</code> falsch.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> document.querySelector vs document.forms Benchmark Wed, 19 Dec 18 19:22:53 Z https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1739090#m1739090 https://forum.selfhtml.org/self/2018/dec/17/welcher-button-wurde-geclickt/1739090#m1739090 <p>Tach!</p> <blockquote> <blockquote> <p>Naja, es ist wohl eher nicht davon auszugehen, dass auf einer Seite vogelwild Förmchen-Wechsel-Dich gespielt wird.</p> </blockquote> <p>Naja, bei einer SPA passiert das schon.</p> </blockquote> <p>Zumindest bei Angular ist das Zugreifen auf Elemente (so es überhaupt derart explizit notwendig ist) einfacher, als sie sich händisch mit document.querySelector() und Co. herauszusuchen.</p> <blockquote> <p>Aber wie gesagt, ist auch dann die Verwendung von <code>document.querySelector</code> / <code>document.querySelectorAll</code> falsch.</p> </blockquote> <p>Für mich ist eher deine Sturheit in der Angelegenheit falsch.</p> <p>dedlfix.</p>