tag:forum.selfhtml.org,2005:/self select input Feld per ajax hinzugefügt aber keine daten Übergabe bei Post – SELFHTML-Forum 2023-04-02T22:10:48Z https://forum.selfhtml.org/self/2023/apr/02/select-input-feld-per-ajax-hinzugefugt-aber-keine-daten-ubergabe-bei-post/1807573#m1807573 Jens Arnols 2023-04-02T02:14:52Z 2023-04-02T03:39:50Z select input Feld per ajax hinzugefügt aber keine daten Übergabe bei Post <p>Hi,<br> ich habe ein älteres Java Programm mal wieder aktiviert und habe folgenden Fehler ( bin mir eigentlich sicher das es mal funktionierte ).</p> <p>Wenn ich das erste Select ändere wird per ajax das 2 ersetzt durch:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Daten2<span class="token punctuation">"</span></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>select1<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>option</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>H2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Datenneu<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> </code></pre> <p>Wen ich den Speichern Button drücke taucht das 2te Select nicht in den post daten auf (bzw. Firefox > Netzwerkanalyse > Anfrage). Wenn ich ohne Ajax Aufruf (keine Änderung des ersten Select's) den Speicher Butten drücke ist das 2 select in den Post Daten.</p> <p>Was muss ich machen das das zweite select nach dem laden per ajax und einfügen mit document.getElementById(Where).innerHTML vom Formular erkannt wird. Muss ich noch was Aktivieren oder es anders einbinden ?</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">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>testit<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>Index<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>select</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>1<span class="token punctuation">'</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Daten1<span class="token punctuation">'</span></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>select0<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span>onchange="AJAX('FeldAJAX',this.form.Daten1.value,'Daten')" > <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>D1<span class="token punctuation">'</span></span><span class="token punctuation">></span></span>Nr1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>D2<span class="token punctuation">'</span></span><span class="token punctuation">></span></span>Nr2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>BR</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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>FeldAJAX<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>select</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>1<span class="token punctuation">'</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Daten2<span class="token punctuation">'</span></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>select1<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>option</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>H1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Datenneu<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>BR</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 special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">senden</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></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>button<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>Klickit<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>Speichern<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>SCRIPT</span> <span class="token attr-name">LANGUAGE</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>JavaScript1.1<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>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token keyword">function</span> <span class="token function">senden</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>testit<span class="token punctuation">.</span><span class="token function">submit</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">var</span> http<span class="token punctuation">;</span> <span class="token keyword">var</span> Where<span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token constant">AJAX</span><span class="token punctuation">(</span><span class="token parameter">WhereToPrint<span class="token punctuation">,</span>Value<span class="token punctuation">,</span>Daten</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> Where <span class="token operator">=</span> WhereToPrint<span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>XMLHttpRequest<span class="token punctuation">)</span> <span class="token punctuation">{</span> http <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</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 keyword">if</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>ActiveXObject<span class="token punctuation">)</span> <span class="token punctuation">{</span> http <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ActiveXObject</span><span class="token punctuation">(</span><span class="token string">"Microsoft.XMLHTTP"</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>http <span class="token operator">!=</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> http<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">"GET"</span><span class="token punctuation">,</span> <span class="token string">"AJAX?VALUE="</span> <span class="token operator">+</span> Value <span class="token operator">+</span> <span class="token string">"&Daten="</span> <span class="token operator">+</span> Daten<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> http<span class="token punctuation">.</span>onreadystatechange <span class="token operator">=</span> AJAX_Output<span class="token punctuation">;</span> http<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token keyword">null</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">function</span> <span class="token function">AJAX_Output</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>http<span class="token punctuation">.</span>readyState <span class="token operator">==</span> <span class="token number">4</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span>Where<span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> http<span class="token punctuation">.</span>responseText<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>SCRIPT</span><span class="token punctuation">></span></span> </code></pre> <p>Danke im voraus für eure Hilfe. Jens</p> https://forum.selfhtml.org/self/2023/apr/02/select-input-feld-per-ajax-hinzugefugt-aber-keine-daten-ubergabe-bei-post/1807574#m1807574 Matthias Scharwies mscharwies@selfhtml.org 2023-04-02T05:42:23Z 2023-04-02T05:42:23Z select input Feld per ajax hinzugefügt aber keine daten Übergabe bei Post <p>Herzlich willkommen Jens,</p> <blockquote> <p>Hi,<br> ich habe ein älteres Java Programm mal wieder aktiviert und habe folgenden Fehler ( bin mir eigentlich sicher das es mal funktionierte ).</p> </blockquote> <p>Wie Du schon sagst, ist dein Java<strong>Script</strong> älter.</p> <pre><code class="block language-javascript"><span class="token keyword">function</span> <span class="token constant">AJAX</span><span class="token punctuation">(</span><span class="token parameter">WhereToPrint<span class="token punctuation">,</span>Value<span class="token punctuation">,</span>Daten</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> Where <span class="token operator">=</span> WhereToPrint<span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>XMLHttpRequest<span class="token punctuation">)</span> <span class="token punctuation">{</span> http <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</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 keyword">if</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>ActiveXObject<span class="token punctuation">)</span> <span class="token punctuation">{</span> http <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ActiveXObject</span><span class="token punctuation">(</span><span class="token string">"Microsoft.XMLHTTP"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Der Internet Explorer ist glücklicherweise tot und daher kann ActiveX weg!</p> <h3>Zeit für einen modernen Neuanfang:</h3><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">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>testit<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>Index<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>select</span> <span class="token attr-name">...</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>select0<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span>onchange="AJAX('FeldAJAX',this.form.Daten1.value,'Daten')" > </code></pre> <p>Funktioniert das <code>onchange</code> nach dem Winkel?</p> <h4>HTML</h4><p>Ich würde das Formular neu aufbauen:</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">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>testit<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>Index<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>select</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>1<span class="token punctuation">'</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Daten1<span class="token punctuation">'</span></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>select0<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>option</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>D1<span class="token punctuation">'</span></span><span class="token punctuation">></span></span>Nr1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>D2<span class="token punctuation">'</span></span><span class="token punctuation">></span></span>Nr2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>1<span class="token punctuation">'</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Daten2<span class="token punctuation">'</span></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>select1<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>option</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>H1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Datenneu<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</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">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></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>Klickit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Speichern<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> <p>br und div würde ich weglassen und das Formular mit CSS formatieren.</p> <p>Mach doch erst mal ne Pause vom Programmieren und lies diese Kurse durch:</p> <ul> <li><a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare" rel="nofollow noopener noreferrer">HTML/Tutorials/Formulare</a></li> <li><a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Formulare" rel="nofollow noopener noreferrer">JavaScript/Tutorials/Formulare</a></li> </ul> <h4>JavaScript</h4><p>Anstelle der onclick- und onchange-Attribute kannst du EventListener verwenden:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> 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> document<span class="token punctuation">.</span>testit<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'change'</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 operator">...</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></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> </code></pre> <blockquote> <p>Danke im voraus für eure Hilfe. Jens</p> </blockquote> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt! </div> https://forum.selfhtml.org/self/2023/apr/02/select-input-feld-per-ajax-hinzugefugt-aber-keine-daten-ubergabe-bei-post/1807590#m1807590 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2023-04-02T12:04:33Z 2023-04-02T18:08:43Z select input Feld per ajax hinzugefügt aber keine daten Übergabe bei Post <p>@@Jens Arnols</p> <blockquote> <pre><code class="block bad language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">senden</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></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>button<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>Klickit<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>Speichern<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>SCRIPT</span> <span class="token attr-name">LANGUAGE</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>JavaScript1.1<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>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> function senden() { this.testit.submit(); } </code></pre> </blockquote> <p>Das macht keinen Sinn, einen Button zum Absenden eines Formulars nicht als Submit-Button zu machen und dann das Absenden des Formulars mit JavaScript nachzubauen.</p> <p>Hättest du</p> <blockquote> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</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>submit<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>Klickit<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>Speichern<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>geschrieben, hättest du dir die <code>senden()</code>-Funktion gleich sparen können.</p> <p>Aber wie es Matthias schon verbessert hatte: für Buttons ist das <code>button</code>-Element da. <a href="https://forum.selfhtml.org/self/2022/feb/13/tabellen-in-formularen/1796154#m1796154" rel="noopener noreferrer">Warum <code>button</code> besser ist als <code>input</code></a>, hatte ich mal aufgeschrieben.</p> <hr> <p><code class="bad">LANGUAGE="JavaScript1.1"</code> war noch nie sinnvoll; kann weg.</p> <p><code>TYPE="text/javascript"</code> ist nicht mehr nötig; kann auch weg.</p> <p>Dein Code sieht aus, als wäre er aus verschiedenen Stellen im Web zusammenkopiert. Mal Großschreibung von Element- und Attributbezeichnern und -werten; mal Kleinschreibung. Auch wenn HTML nicht case-sensitiv ist, sollte man das gleich handhaben. Kleinschreibung ist üblich.</p> <p lang="uk"> Живіть довго і процвітайте</p> <div class="signature">-- <br> <em lang="cs">„Ukončete, prosím, výstup a nástup, dveře se zavírají.“</em> </div> https://forum.selfhtml.org/self/2023/apr/02/select-input-feld-per-ajax-hinzugefugt-aber-keine-daten-ubergabe-bei-post/1807604#m1807604 Felix Riesterer https://felix-riesterer.de 2023-04-02T18:00:26Z 2023-04-02T18:00:26Z select input Feld per ajax hinzugefügt aber keine daten Übergabe bei Post <p>Lieber Jens,</p> <blockquote> <p>Wenn ich das erste Select ändere wird per ajax das 2 ersetzt durch:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Daten2<span class="token punctuation">"</span></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>select1<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>option</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>H2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Datenneu<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>warum? <em>Was genau(!)</em> tust Du da <em>eigentlich(!)</em>? Und warum braucht es AJAX dafür? Kann das Dokument nicht alle Möglichkeiten bereits vorsehen und ohne AJAX-Telefonie das Formular anpassen?</p> <p>Es ist problematisch, wenn <a href="https://forum.selfhtml.org/self/2023/apr/02/select-input-feld-per-ajax-hinzugefugt-aber-keine-daten-ubergabe-bei-post/1807585#m1807585" rel="noopener noreferrer">man <code>innerHTML</code> verwendet</a>, um Formularelemente zu verändern, weil damit die EventListener oder EventHandler verloren gehen.</p> <p>Zeig doch mal, was Du <em>wirklich</em> tun willst, dann kann man Dir auch <em>wirklich</em> helfen.</p> <p>Liebe Grüße</p> <p>Felix Riesterer</p> https://forum.selfhtml.org/self/2023/apr/02/select-input-feld-per-ajax-hinzugefugt-aber-keine-daten-ubergabe-bei-post/1807575#m1807575 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2023-04-02T07:19:02Z 2023-04-02T07:19:02Z select input Feld per ajax hinzugefügt aber keine daten Übergabe bei Post <p>@@Matthias Scharwies</p> <blockquote> <p>Ich würde das Formular neu aufbauen:</p> </blockquote> <p>Vieles richtig, was du sagst, aber …</p> <blockquote> <pre><code class="block bad 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">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>testit<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>Index<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>select</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>1<span class="token punctuation">'</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Daten1<span class="token punctuation">'</span></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>select0<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>option</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>D1<span class="token punctuation">'</span></span><span class="token punctuation">></span></span>Nr1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>D2<span class="token punctuation">'</span></span><span class="token punctuation">></span></span>Nr2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>1<span class="token punctuation">'</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Daten2<span class="token punctuation">'</span></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>select1<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>option</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>H1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Datenneu<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</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">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></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>Klickit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Speichern<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> </blockquote> <p>… die Formularfelder unbeschriftet zu lassen gibt einen Minuspunkt.</p> <p>Alle Formularfelder brauchen eine <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Beschriftungen" rel="nofollow noopener noreferrer">Beschriftung</a>: möglichst mit <code>label</code>; zur Not mit <code>aria-label</code>, was aber gegen die <a href="https://www.w3.org/TR/using-aria/#rule1" rel="nofollow noopener noreferrer">erste Direktive</a> verstößt.</p> <pre><code class="block good 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">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>testit<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>Index<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>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>select0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>ein Auswahlfeld<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>1<span class="token punctuation">'</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Daten1<span class="token punctuation">'</span></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>select0<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>option</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>D1<span class="token punctuation">'</span></span><span class="token punctuation">></span></span>Nr1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>D2<span class="token punctuation">'</span></span><span class="token punctuation">></span></span>Nr2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>select1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>noch ein Auswahlfeld<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>1<span class="token punctuation">'</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Daten2<span class="token punctuation">'</span></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>select1<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>option</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>H1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Datenneu<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</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">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></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>Klickit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Speichern<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> <p lang="uk"> Живіть довго і процвітайте</p> <div class="signature">-- <br> <em lang="cs">„Ukončete, prosím, výstup a nástup, dveře se zavírají.“</em> </div> https://forum.selfhtml.org/self/2023/apr/02/select-input-feld-per-ajax-hinzugefugt-aber-keine-daten-ubergabe-bei-post/1807585#m1807585 Jens Arnols 2023-04-02T11:10:35Z 2023-04-02T11:10:35Z select input Feld per ajax hinzugefügt aber keine daten Übergabe bei Post <p>hi,</p> <blockquote> <p>Der Internet Explorer ist glücklicherweise tot und daher kann ActiveX weg!</p> <h3>Zeit für einen modernen Neuanfang:</h3><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">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>testit<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>Index<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>select</span> <span class="token attr-name">...</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>select0<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span>onchange="AJAX('FeldAJAX',this.form.Daten1.value,'Daten')" > </code></pre> <p>Funktioniert das <code>onchange</code> nach dem Winkel?</p> </blockquote> <p>das Fehlerhafte/zusätzliche > ist mir beim editieren des Artikel dazwischengekommen Sorry.</p> <blockquote> <h4>HTML</h4><p>Ich würde das Formular neu aufbauen:</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">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>testit<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>Index<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>select</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>1<span class="token punctuation">'</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Daten1<span class="token punctuation">'</span></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>select0<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>option</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>D1<span class="token punctuation">'</span></span><span class="token punctuation">></span></span>Nr1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>D2<span class="token punctuation">'</span></span><span class="token punctuation">></span></span>Nr2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>1<span class="token punctuation">'</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Daten2<span class="token punctuation">'</span></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>select1<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>option</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>H1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Datenneu<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</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">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></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>Klickit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Speichern<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> <p>br und div würde ich weglassen und das Formular mit CSS formatieren.</p> </blockquote> <p>Bei den br's stimme ich dir zu waren nur im code zu meiner Lesbarkeit bei meinem Test. Das div ist natürlich essenziell weil ich das innerhtml diese div's durch Ajax ersetze, womit ich ja derzeit das Problem habe.</p> <p>Jens</p> https://forum.selfhtml.org/self/2023/apr/02/select-input-feld-per-ajax-hinzugefugt-aber-keine-daten-ubergabe-bei-post/1807576#m1807576 Matthias Scharwies mscharwies@selfhtml.org 2023-04-02T07:24:19Z 2023-04-02T07:29:28Z select input Feld per ajax hinzugefügt aber keine daten Übergabe bei Post <p>Auch dir liebe Ostern,</p> <p>lass doch die Leute mal die Tutorials lesen, anstatt immer den Tüpfelscheisser zu spielen und alles rot zu markieren!</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt! </div> https://forum.selfhtml.org/self/2023/apr/02/select-input-feld-per-ajax-hinzugefugt-aber-keine-daten-ubergabe-bei-post/1807577#m1807577 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2023-04-02T07:31:05Z 2023-04-02T12:05:24Z select input Feld per ajax hinzugefügt aber keine daten Übergabe bei Post <p>@@Matthias Scharwies</p> <blockquote> <p>lass doch die Leute mal die Tutorials lesen</p> </blockquote> <p>Meine Einschätzung: Die hier im Forum Fragenden wollen meist schnelle Antworten auf ihre Fragen, nicht dreiundzwölzig Tutorials lesen und sich die Antworten auf ihre aktuellen Probleme heraussuchen müssen.</p> <p>Dass dir die Einschätzung nicht gefällt, macht sie nicht falsch.</p> <blockquote> <p>anstatt immer den Tüfelscheisser zu spielen und alles rot zu markieren!</p> </blockquote> <p>Ich markiere schlechten Code als schlechten Code – so wie das dafür vorgesehen ist. Wenn dir das Rot nicht gefällt, beschwer dich beim Autor des Stylesheets.</p> <p lang="uk"> Живіть довго і процвітайте</p> <div class="signature">-- <br> <em lang="cs">„Ukončete, prosím, výstup a nástup, dveře se zavírají.“</em> </div> https://forum.selfhtml.org/self/2023/apr/02/select-input-feld-per-ajax-hinzugefugt-aber-keine-daten-ubergabe-bei-post/1807583#m1807583 Jens Arnols 2023-04-02T10:59:05Z 2023-04-02T10:59:05Z select input Feld per ajax hinzugefügt aber keine daten Übergabe bei Post <p>Hi,</p> <p>Danke schonmal für die Antworten.</p> <p>ich habe versucht in dem Beispiel da Formular auf das minimale zu reduzieren um das Problem aufzuzeigen, auch daran zu erkennen das ich alles Nötige durch dummy Daten ersetzt habe.</p> <p>Ich vermute das das Problem irgendwie durch das ersetzen des select per Ajax das neue selectfeld nicht vom Formular erkannt wird.</p> <p>Jens</p> https://forum.selfhtml.org/self/2023/apr/02/select-input-feld-per-ajax-hinzugefugt-aber-keine-daten-ubergabe-bei-post/1807606#m1807606 Jens Arnols 2023-04-02T19:27:31Z 2023-04-02T19:27:31Z select input Feld per ajax hinzugefügt aber keine daten Übergabe bei Post <p>Hi,</p> <p>die Daten für das 2te select werden aus einer Datenbank dynamisch nachgeladen und sind zu Groß um sie im ersten Aufruf mitzuliefern.</p> <p>Wen ich die Zeile z = document.testit einbaue und z debugge sehe ich das nach dem einfügen des innerHTML ein Element weniger vorhanden ist.</p> <p>Ich weis das ich mit createElement und dann add das select in Einzelschritten erstellen kann ich würde es aber vorziehen einen html String direkt anzufügen.</p> <p>Kann man den EventListener oder EventHandler wieder aufbauen bzw. das neue Ajax beim Einfügen parsen zu lassen.</p> <p>Ich weis das es möglich ist mit cloneNode und insertAdjacentElement Formular Elemente so zu kopieren das sie im post erscheinen.</p> https://forum.selfhtml.org/self/2023/apr/02/select-input-feld-per-ajax-hinzugefugt-aber-keine-daten-ubergabe-bei-post/1807607#m1807607 Rolf B 2023-04-02T20:23:15Z 2023-04-02T20:23:15Z select input Feld per ajax hinzugefügt aber keine daten Übergabe bei Post <p>Hallo Jens Arnols,</p> <p>das Problem der verlorengehenden Eventlistener hast Du nicht. Zum einen verwendest Du keine Eventlistener, die über addEventListener registriert werden, zum anderen verarbeitest Du für dein Daten2-Select keine Events.</p> <blockquote> <p>Ich vermute das das Problem irgendwie durch das ersetzen des select per Ajax das neue selectfeld nicht vom Formular erkannt wird.</p> </blockquote> <p>Ich auch. Was Du uns bisher nicht gezeigt hast, ist, wie das HTML-Fragment aussieht, das Du vom Server bekommst und in das FeldAJAX-div einsetzt. Deswegen diese Frage:</p> <p>Durch die Zuweisung an innerHTML entfernst Du das alte <select>-Element und erzeugst ein neues. Besitzt dieses neue <select>-Element ein name-Attribut? Dann und nur dann wird es beim nächsten Submit übermittelt.</p> <p>Dein JavaScript-Code ist sehr umständlich.</p> <ol> <li>Selbst der Internet Explorer kennt seit Version 10 den XMLHttpRequest (und der IE ist mittlerweile tot und ausgemustert). Daher ist der ActiveX-Fallback hyperfluid.</li> <li>Der dritte Parameter von open besagt, ob XMLHttpRequest asynchron arbeiten soll. true heißt: Ja, soll er. Und das ist der Default, das kannst Du also weglassen</li> <li>Die globalen Variablen http und Where brauchst Du, weil Du AJAX_Output als separate Funktion notiert hast. Das geht besser - man kann Funktionen schachteln, wodurch die innere Funktion Zugriff auf alle Variablen der äußeren Funktion hat. Das gilt selbst dann, wenn die innere Funktion als Eventhandler verwendet wird und ihr Aufruf erst erfolgt, wenn die äußere Funktion eigentlich längst beendet wurde. Der Aufrufkontext bleibt aber erhalten. Stichwort zum Nachlesen: Closure.</li> </ol> <pre><code class="block language-js"><span class="token keyword">function</span> <span class="token constant">AJAX</span><span class="token punctuation">(</span><span class="token parameter">WhereToPrint<span class="token punctuation">,</span>Value<span class="token punctuation">,</span>Daten</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> http <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> http<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">"GET"</span><span class="token punctuation">,</span> <span class="token string">"AJAX?VALUE="</span> <span class="token operator">+</span> Value <span class="token operator">+</span> <span class="token string">"&Daten="</span> <span class="token operator">+</span> Daten<span class="token punctuation">)</span><span class="token punctuation">;</span> http<span class="token punctuation">.</span>onreadystatechange <span class="token operator">=</span> AJAX_Output<span class="token punctuation">;</span> http<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">AJAX_Output</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>http<span class="token punctuation">.</span>readyState <span class="token operator">==</span> <span class="token number">4</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span>WhereToPrint<span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> http<span class="token punctuation">.</span>responseText<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>Das kann man noch weiter treiben und einen <em>Funktionsausdruck</em> verwenden. Der erzeugt eine anonyme Funktion, die man wie ein ganz normales Objekt herumreichen kann. Achte auf das Semikolon hinter dem }, das ist jetzt wichtig.</p> <pre><code class="block language-js"><span class="token keyword">function</span> <span class="token constant">AJAX</span><span class="token punctuation">(</span><span class="token parameter">WhereToPrint<span class="token punctuation">,</span>Value<span class="token punctuation">,</span>Daten</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> http <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> http<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">"GET"</span><span class="token punctuation">,</span> <span class="token string">"AJAX?VALUE="</span> <span class="token operator">+</span> Value <span class="token operator">+</span> <span class="token string">"&Daten="</span> <span class="token operator">+</span> Daten<span class="token punctuation">)</span><span class="token punctuation">;</span> http<span class="token punctuation">.</span><span class="token function-variable function">onreadystatechange</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>http<span class="token punctuation">.</span>readyState <span class="token operator">==</span> <span class="token number">4</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span>WhereToPrint<span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> http<span class="token punctuation">.</span>responseText<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> http<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Die modernere Variante wäre das fetch-API. Der Internet Explorer kann das nicht - aber wie gesagt, der ist tot. Mit fetch wird AJAX ein Dreizeiler.</p> <pre><code class="block language-js"><span class="token keyword">function</span> <span class="token constant">AJAX</span><span class="token punctuation">(</span><span class="token parameter">WhereToPrint<span class="token punctuation">,</span>Value<span class="token punctuation">,</span>Daten</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">"AJAX?VALUE="</span> <span class="token operator">+</span> Value <span class="token operator">+</span> <span class="token string">"&Daten="</span> <span class="token operator">+</span> Daten<span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token operator">=></span> response<span class="token punctuation">.</span><span class="token function">text</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">then</span><span class="token punctuation">(</span><span class="token parameter">html</span> <span class="token operator">=></span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span>WhereToPrint<span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> html<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Problem bei fetch ist, dass es auf Promises basiert und man die erstmal kapieren muss, bevor man fetch wirklich kapiert.</p> <p>Unser Wiki ist bezüglich fetch leider noch sehr schwach bestückt, ich habe es noch nicht geschafft, meine Baustelle dort fertigzustellen. Wenn Du englisch kannst, probier's bei <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API" rel="nofollow noopener noreferrer">Mozilla</a>.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2023/apr/02/select-input-feld-per-ajax-hinzugefugt-aber-keine-daten-ubergabe-bei-post/1807608#m1807608 Felix Riesterer https://felix-riesterer.de 2023-04-02T20:28:09Z 2023-04-02T20:29:48Z select input Feld per ajax hinzugefügt aber keine daten Übergabe bei Post <p>Lieber Jens,</p> <p>Du hast also ein Formular, dessen <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Formulare/Verkettete_Auswahllisten" rel="nofollow noopener noreferrer">verkettete Auswahlmöglichkeiten</a> so viele sind, dass Du sie nicht von Anfang an in das Dokument schreiben willst. Können könntest Du schon, aber wollen willst Du nicht. Diese Entscheidung hat selbstverständlich einen Sinn, bedeutet aber auch, dass die dynamische Umgestaltung des Formulars gut überlegt sein will.</p> <p>Fragen:</p> <ol> <li>Was genau sendet der Server auf Deinen AJAX-Request als Antwort?</li> <li>Wonach entscheidet Dein JavaScript, was genau im DOM des Formulars wie geändert werden muss?</li> </ol> <p>Meiner Vorstellung nach sollte der Server keinesfalls HTML-Code auf den AJAX-Call liefern, sondern besser Rohdaten, anhand derer JavaScript dann passende Elementknoten ins DOM schreibt. Das propagiere ich deswegen, weil nach dem initialen HTML-Dokument, welches der Server an den Browser sendet, aus Sicht des Servers keine Gewähr mehr ist, dass das DOM zur Zeit des AJAX-Calls genau so geblieben ist, wie es der Server im HTML-Dokument ursprünglich vorgesehen hat. Wenn JavaScript das DOM umbauen soll, dann muss auch JavaScript entscheiden, was es in welchem Fall genau tut. Also soll der Server keinen HTML-Code nachsenden, sondern Rohdaten, <a href="https://wiki.selfhtml.org/wiki/JavaScript/WindowOrWorkerGlobalScope/fetch" rel="nofollow noopener noreferrer">wie z.B. im JSON-Format</a>. Das könnte dann so aussehen:</p> <pre><code class="block language-javascript"><span class="token punctuation">[</span> <span class="token punctuation">[</span><span class="token string">"id"</span><span class="token operator">:</span> <span class="token string">"abc"</span><span class="token punctuation">,</span> <span class="token string-property property">"text"</span><span class="token operator">:</span> <span class="token string">"alle benutzten Computer"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">"id"</span><span class="token operator">:</span> <span class="token string">"agb"</span><span class="token punctuation">,</span> <span class="token string-property property">"text"</span><span class="token operator">:</span> <span class="token string">"allgemeine Geschäftsbedingungen"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">"id"</span><span class="token operator">:</span> <span class="token string">"xyz"</span><span class="token punctuation">,</span> <span class="token string-property property">"text"</span><span class="token operator">:</span> <span class="token string">"x oder y, aber nicht z"</span><span class="token punctuation">]</span> <span class="token punctuation">]</span> </code></pre> <p>Wenn Du das nicht mit <code>fetch</code> machen willst, sondern weiterhin an Deinem XMLHttpRequest-Objekt festhalten willst, <a href="https://wiki.selfhtml.org/wiki/JSON#Einbinden_externer_JSON-Dateien" rel="nofollow noopener noreferrer">dann geht das auch</a>. Danach hast Du aber ein Array mit key-value-Paaren, welches Du dazu verwenden kannst, die <code><option></code>-Elemente in Dein <code><select></code> einzufügen.</p> <p>Die dazu notwendigen Umbauten mögen vielleicht lästig sein, dafür aber hast Du ein modernisiertes Script, dessen Funktionsweise Du verstanden hast (und für die Zukunft hoffentlich entsprechend auskommentiert!), und dessen Funktionalität weniger störanfällig ist, weil das serverseitige Script nichts mehr vom DOM verstehen muss.</p> <p>Es bleibt nur noch die vielleicht unterschiedliche Performance zwischen dem Setzen der <code>innerHTML</code>-Eigenschaft und dem dynamischen Erzeugen der Elementknoten zu prüfen. Auf leistungsschwächeren Systemen (wie z.B. alten Smartphones) würde sich das schon bemerkbar machen. Aber der Browser muss ja ohnehin Elementknoten erzeugen. Ob er das implizit oder explizit tut, sollte kein Performanceunterschied sein.</p> <p>Liebe Grüße</p> <p>Felix Riesterer</p> https://forum.selfhtml.org/self/2023/apr/02/select-input-feld-per-ajax-hinzugefugt-aber-keine-daten-ubergabe-bei-post/1807609#m1807609 Jens Arnols 2023-04-02T21:03:10Z 2023-04-02T21:03:10Z select input Feld per ajax hinzugefügt aber keine daten Übergabe bei Post <p>Hi</p> <p>Danke für die Tipps ich werde den JS code mal aufräumen.<br> Der von Web Server zurückgegebene Text ist:</p> <p><select size="1" name="Daten2" id="select1"><br> <option value="H2">Datenneu</option><br> </select></p> https://forum.selfhtml.org/self/2023/apr/02/select-input-feld-per-ajax-hinzugefugt-aber-keine-daten-ubergabe-bei-post/1807610#m1807610 Rolf B 2023-04-02T22:10:48Z 2023-04-02T22:10:48Z select input Feld per ajax hinzugefügt aber keine daten Übergabe bei Post <p>Hallo Jens Arnols,</p> <p>ich habe das gerade mal versucht nachzubauen. Ohne Ajax, einfach nur mit dem HTML in einem String.</p> <p>Es gibt keinen Grund, warum korrekt eingesetztes HTML nicht gepostet werden sollte. Der Fehler liegt an der Art, wie Du das einsetzt. Oder das, was Du einsetzt, ist nicht genau das, was Du geschrieben hast.</p> <p>Dein Beispiel enthält aber 2 relevante HTML Fehler:</p> <ul> <li>Du schreibst <code></br></code>. Also ein br End-Tag, das eigentlich ohnehin überflüssig ist, und ein <br> Anfangstag ist nirgends zu sehen. Mein Browser macht ein <br> daraus und das DOM bleibt halbwegs korrekt strukturiert. Was Dein Browser tut, weiß ich nicht. <strong>Schreibe nie </br>. Höchstens <br>.</strong></li> <li>Dein FeldAJAX Div hat kein Ende-Tag. Bei mir im jsFiddle führt das zum Untergang, weil sowohl der Submit-Button wie auch das JavaScript dadurch eliminiert weren. <strong>Du brauchst ein </div> hinter dem </select></strong></li> </ul> <p>Sind das Fehler bei der Übertragung ins Forum? Oder hast Du auf deiner Seite ähnliche Merkwürdigkeiten?`</p> <p>Wie sieht das DOM bei Dir aus, nachdem die AJAX-Funktion gelaufen ist? Hast Du das mit den Browser-Entwicklertools (Taste <code>F12</code> oder <code>Strg</code>+<code>⇑</code>+<code>I</code> überprüft? Befindet sich das select-Element nach der Überzeugung des Browsers im Form? Das sind Dinge, die Du debuggen musst. Die Browser-Entwicklerwerkzeuge sind dafür unabdingbar. Heißt natürlich, dass Du mit einem Desktop-Gerät debuggen musst. Android- oder iOS-Browser haben keine Entwicklerwerkzeuge eingebaut.</p> <p>Kontrolliere auch das HTML, das bei Dir ankommt. Im Netzwerk-Tab der Entwicklerwerkzeuge siehst Du jeden Serverzugriff. Du kannst Header, gesendete Daten und empfangene Daten genau überprüfen. Nutze diese Tools!</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div>