onclick submit noch etwas verbessern

[Katharina]

Hallo,

ich habe das erste mal mit Javascript zu tun, und versucht mich durch viele Dokumentationen durch zu arbeiten. Ich glaube ganz erfolgreich.

<input type="checkbox" name="samstag" value="1" onclick="document.myForm.submit()">

funktioniert super, es wird das Formular bei Änderungen übertragen. Jetzt habe ich bemerkt, das das PHP Script welches das Formular bearbeitet je nach Auslastung etwas Zeit braucht 1-4 Sekunden.
Ich würde gerne nach dem Submit eine Ladegrafik anzeigen, gibt es hierfür eine Lösung?

[Felix Riesterer]

Liebe Katharina,

Ich würde gerne nach dem Submit eine Ladegrafik anzeigen, gibt es hierfür eine Lösung?

Du könntest Dir eine eigene Funktion schreiben, die zuerst(!) die Ladegrafik anzeigt und dann das Formular abschickt. In etwa so vielleicht?

function mySubmit () {  
    document.myForm.className += " abgeschickt"; // <form class="..."> -> <form class="... abgeschickt">  
    return document.myForm.submit();  
}

Das Beispiel hängt an das Formular einen weiteren Klassennamen an (falls das Formular bereits einen oder mehrere Klassennamen hat). Mittels CSS kann nun ein bisher verstecktes Element sichtbar gemacht werden, welches zum einen das Formular selbst verdeckt (damit keine weiteren Elemente des Formulars betätigt werden können), und das zum Anderen eine animierte Throbber-Grafik anzeigt.

Dein Input-Element benötigt nun diesen onclick-Wert:
<input type="checkbox" name="samstag" value="1" onclick="mySubmit()">

Liebe Grüße,

Felix Riesterer.

[Der Martin]

Hallo,

ergänzend zu den Ausführungen von Felix möchte ich anmerken, dass ich den Ansatz grundsätzlich für keine gute Idee halte:

<input type="checkbox" name="samstag" value="1" onclick="mySubmit()">

Ein Formular beim Anklicken einer Checkbox abzuschicken, ist ein unerwartetes Verhalten, und der Nutzer hat keine Chance mehr, eventuell einen Irrtum zu bemerken. Gerade Checkboxen oder Radiobuttons laden ja gerade dazu ein, sie einfach mal zu "checken", und es sich dann doch nochmal anders zu überlegen.

Ich empfehle daher, die Checkbox in Ruhe zu lassen, und stattdessen die Anzeige des Bildes als onclick-Handler auf den Submit-Button zu legen. Dann wird beim Absenden auch die Pausenanimation angezeigt; das Formular und seine Elemente verhalten sich aber ansonsten normal.

So long,
 Martin

[Katharina]

Lieber Felix,

ich danke dir. eine tolle Idee, ist es korrekt, das dann das Formular nicht mehr sichtbar ist sondern nur noch die Ladegrafik?

Du könntest Dir eine eigene Funktion schreiben, die zuerst(!) die Ladegrafik anzeigt und dann das Formular abschickt. In etwa so vielleicht?

Ja, fast ich würde gerne an einer Stelle im Formular eine Throbber Grafik anzeigen.

Wie würde so eine CSS aussehen?

Danke

Katharina K.

[Steel]

Moin!

ich danke dir. eine tolle Idee, ist es korrekt, das dann das Formular nicht mehr sichtbar ist sondern nur noch die Ladegrafik?

Ja.

Du könntest Dir eine eigene Funktion schreiben, die zuerst(!) die Ladegrafik anzeigt und dann das Formular abschickt. In etwa so vielleicht?
Ja, fast ich würde gerne an einer Stelle im Formular eine Throbber Grafik anzeigen.

Dann ist das Formular erstmal aber noch aktiv. Ist das gewollt?

Wie würde so eine CSS aussehen?

Kommt drauf an. Im einfachsten Fall positionierst Du diese Grafik absolut im Formular. (irgendwo bei dem klickbaren Absende-Element) und versteckst sie. Bei Klick zeigst Du sie wieder. Du weist der Grafik also einen Klassennamen zu der im CSS die Anzeige regelt.

[Katharina]

Danke Steel,

Katharina

[Felix Riesterer]

Liebe Katharina,

Wie würde so eine CSS aussehen?

CSS alleine genügt nicht. Ich schrieb von einem versteckten Element, das sichtbar werden soll. Dazu musst Du zunächst einmal dieses Element erstellen, es mit CSS so gestalten, dass es das Formular (oder zumindest die Eingabeelemente) verdeckt. Dann kannst Du es unsichtbar machen.

Vorschlag:

<form action="mein-script.php" method="post">  
    <p class="throbber"><img src="pfad/throbber.gif" alt="Animation" /> Bitte einen Augenblick Geduld.</p>  
    <p>... andere Formularinhalte</p>  
</form>

Wenn Du Dich bisher mit CSS genausoviel beschäftigt hast, wie mit JavaScript, dann empfehle ich Dir, Dich mit den Grundlagen zu beschäftigen. SELFHTML ist dafür eine gute Anlaufstelle.

Wenn sich bei Deinen CSS-Erfahrungen Fragen auftun, dann kannst Du hier (in diesem Thread oder einem neuen) jederzeit wieder posten.

Liebe Grüße,

Felix Riesterer.

[Katharina]

Vielen Dank Felix