[GELÖST] Chrome und FormBuilder (oder HTML5 oder Bootstrap Problem?)

rage_all · 17. Dezember 2014 13:52

Hallo zusammen,

interessantes Problem, das mir bei der Entwicklung eines ganz anderen Projektes aufgefallen ist, sich aber wohl scheinbar durch mehrere Projekte hindurchzieht.

Was haben die Seiten gemeinsam? Bootstrap, folglich auch HTML5 unter Beachtung der Validität (wenn machbar). Ansonsten? Wenn es einigermaßen läuft, sind alle auf derselbsen CMSms Plattform, auf PHP5.4 und FormBuilder ist evtl. auch bei allen auf dem neuesten Stand.
Nur, ich glaube damit hat das alles nichts zu tun. Ich fürchte einen Fehler meinerseits im Template mit dem Chrome nicht klar kommt. Deswegen meine Frage:

Warum kann ich unter anderem auf folgenden Seiten:
» Link1 -- braucht es ja jetzt nicht mehr...
» Link2 -- braucht es ja jetzt auch nicht mehr...
mit dem Button "Senden" das Formular nicht abschicken?

Aufgefallen ist mir das übrigens mit Chrome Mobile. Ergo schließe ich einen Bug in der aktuellen Version von Chrome mal aus. Seit jeher habe ich

Hier klicken, um den Code zum Kopieren zu markieren

[== HTML ==]
<input class="cms_submit fbsubmit" name="cntnt01fbrp_submit" id="cntnt01fbrp_submit" value="Absenden" type="submit">

als Code zum Senden des Formulars verwendet.
Okay, jetzt noch mit JS-Schnipsel zum bunt anmalen ... aber das kann doch nicht die Ursache sein. Oder etwa doch? roll

Hier klicken, um den Code zum Kopieren zu markieren

[== JavaScript ==]
<input class="cms_submit fbsubmit btn btn-default"
  name="cntnt01fbrp_submit" id="cntnt01fbrp_submit"
  value="Senden" type="submit"
  onClick="this.disabled=true; this.value='Sendet…'; this.classList.add('btn-danger');" />

Also, Absenden funktioniert mit
Firefox 34
Internet Explorer 11
Nicht aber mit
Opera 26
Opera 12
Safari 5.1.7
Chrome 39

Ich fürchte also JavaScript... hmm
...und bin Dankbar für Hinweise. smile

Beitrag geändert von rage_all (17. Dezember 2014 15:56)

rage_all · 17. Dezember 2014 14:04

Alles klar.
Es war das "onClick="this.disabled=true;".

Macht mir zwar keinen Sinn, weil ich denke das ein HTML-Aufruf neben einem JS-Aufruf nicht kaputt gehen darf - aber soviel Redundanz ist wohl zuviel verlangt... big_smile
Scheinbar deaktivieren einige Render-Engines wie eben Chrome und der neue Opera (ist das nicht beides Webkit?) sofort das <input>, noch bevor der Mausklick den Button ganz eingedrückt hat...
Firefox und IE sagen sich scheinbar, dass zum Deaktivieren des Button noch genug Zeit bleibt, nachdem das Event "click" durchgeführt ist.

Aber, wie kann ich jetzt im Zuge der ersten Übermittlung eine weitere Übermittlung verhindern (z.B. bei langsamer Internetverbindung beim User oder Doppel-Klick - ist mir ja hier im Forum auch schon passiert mit [Gelöst][Gelöst]...)?

NaN · 17. Dezember 2014 15:44

Ist das ein Tippfehler, oder steht das dort wirklich so im Formular drin?

Es war das "onClick="this.disabled=true;".

Wenn Du Dir den Code genauer anschaust, wirst Du sehen, dass dort eigentlich folgendes steht:

<input ... onclick="onClick=" this.disabled=true; this.value='Sendet…'; this.classList.add('btn-danger'); " /> ...

Was ich kursiv markiert habe, ist eine Javascript-Funktion, die es nicht gibt.
Daher macht der Button nichts.
Was ich fett markiert habe, sind für den Browser invalide Attribute, die der Browser i.d.R. einfach ignoriert.
Was ich rot markiert habe, führt zu invalidem Markup.
Was daraus resultiert, da sei der Fantasie dank der Browser-Vielfalt keine Grenzen gesetzt.

Sollte das nur ein Tippfehler sein:

Das Problem ist, dass ein Submit-Button, der deaktiviert ist, kein Submit-Event auslösen kann (onSumbit) - und dadurch das Formular nicht abgeschickt wird. Wann er dieses Event normalerweise auslöst, ist je nach Browser unterschiedlich. Was Du also mit onClick="this.disabled=true" in manchen Fällen tust, ist, den Button zu deaktivieren bevor er onSubmit auslösen kann.

Lösung: nimm stattdessen onSubmit="" beim <form>-Element.
Ermittle die Submit-Buttons des Formulars und deaktiviere sie.

Beispiele: http://stackoverflow.com/questions/5691 … orm-submit
(die ersten beiden Antworten dort sagen eigentlich alles)

Interessant ist auch diese Antwort des gleichen Beitrags. Die Werte deaktivierter Buttons werden nicht mit dem Formular übertragen. D.h. falls das PHP-Script den Submit-Button abfragt, um festzustellen, ob das Formular abgesendet wurde, könnte das vielleicht auch hilfreich sein.

rage_all · 17. Dezember 2014 16:06

NaN schrieb:

Ist das ein Tippfehler, oder

War ein Tippfehler. Ich hab doch die Links aus dem ursprünglichen Post entfernt (nichts dagegen, wenn Ihr die Seiten besucht, sollte aber auch nicht aussehen, als würde ich hier Links spammen wegen blödsinniger Fehlerchen...). Bei der Hektik hab ich irgendwo aus einem Texteditor oder Firebug schnell was zusammenkopiert.
Keine Ahnung warum, aber wenn ich so einen kapitalen Fehler entdecke, weswegen hier vermutlich schon seit vielen Wochen und Monaten (über diverse Browser) keine Nachrichten verschickt werden können, werde ich nervös und fixe die Fehler sofort - auch unter Verlust solcher netter Funktionalitäten. Da hab ich das Original irgendwo vergeigt.

Für gewöhnlich checke ich jede einzelne Seite auf W3-Validität und schau auch ob alles Funktioniert und ob Fehler in der Konsole ausgegeben werden. Deswegen schließe ich einfach mal einen Tippfehler als solchen aus. smile

Aber ja, das <disabled> macht in diesem Zusammenhang sogar Sinn. Umgekehrt könnte ich den Button ja auch erst dann aktivieren, wenn z.B. JavaScript die Emailadresse für gültig erklärt hat und die Pflichtfelder brav ausgefüllt sind (Stichwort: Passwort wiederholen - da sind ja oft solche 'Helfer' mit drin). Dann wäre es unsinnig, via JS den Button zu deaktivieren, wenn ich ihn sowieso und trotzdem triggern kann.
So weit hab ich gerade in meiner Nervosität nicht geschalten. Für mich ist JS immer noch was niedliches für Mausspuren und so... big_smile
Aber, spätestens seit HTML5 sollte ich vielleicht doch mal mehr Bücher lesen, JS richtig lernen und ein 'richtiger' Webdesigner werden *lach*.

Auf einer der betroffenen Seiten habe ich es jetzt so angepasst wie auf stackoverflow beschrieben und es funktioniert!
Danke für die Hilfe!

Forum für CMS/made simple

#1 17. Dezember 2014 13:52

[GELÖST] Chrome und FormBuilder (oder HTML5 oder Bootstrap Problem?)

#2 17. Dezember 2014 14:04

Re: [GELÖST] Chrome und FormBuilder (oder HTML5 oder Bootstrap Problem?)

#3 17. Dezember 2014 15:44

Re: [GELÖST] Chrome und FormBuilder (oder HTML5 oder Bootstrap Problem?)

#4 17. Dezember 2014 16:06

Re: [GELÖST] Chrome und FormBuilder (oder HTML5 oder Bootstrap Problem?)

Fußzeile des Forums