Button Klick --> Ladezeichen

[Manuel]

Hi,

ich weis nicht wie ich das euch so erklären soll, aber ich möchte wenn man auf den Absenden Button klickt um ein Paket hpchzuladen auf meinen Server, dass dann so ein Ladebalken kommt. also nicht Ladebalken wie lange er noch braucht also in Prozent das lässt sich ja weder mit JS noch mit PHP realisieren. Ich meine so etwas in der Art: http://www.kennziffer.com/fileadmin/yaml/img/ladebalken.gif

Das sollte erschreinen (auf der selben Seite) wenn man den Button anklickt. Irgendwann geht er ja dann zur nächsten Seite. Sollte bloß so als Verschönerung dienen. Aber ich weis nicht wie ich und wonach ich in Google suchen sollte. Mir fällt es ja schon schwer das hier zu erklären. Da ich in JS ein totaler Anfänger bin bräuchte ich Hilfe.

 

[rd4eva]

Das Stichwort lautet Ajax.
Wenn du auf den Button clickst wird ein Ajax Request gestartet und das Ladebildchen angezeigt.
Sobald du dann z.B. von php die Antwort bekommst das der Request abgeschlossen ist entfernst du das Bild wieder.
Das ist schon der ganze Trick dabei.

 

[Manuel]

In Ajax weis ich noch weniger als in JS. Ich brauch halt nur einen Code der bei klick auf den Button ein Bild anzeigt und dann läd er sowieso irgendwann die nächste Seite. Also ich brauch nur die Funktion die das auslöst mehr nicht.

 

[CPoly]

Das was du suchst hat mit Ajax nichts zu tun. Beim Klick auf den Button bzw. bei Absenden des Formulars blendest du die Grafik ein. Das wars auch schon. Wenn das Formular fertig ist und die Seite neu geladen wird, verschwindet die Grafik ja von selbst wieder.

<!--Das Formular hat natürlich noch andere Attribute-->
<form onsubmit="form_submit();">
    <!--Hier irgendwelche inputs und submit buttons-->
</form>

<!--Die Grafik ist standardmäßig unsichtbar-->
<img src="loading.gif" style="display:none;" id="img_loading" />

<script type="text/javascript">
/* <![CDATA[ */
function form_submit() {
    //hier wird die Grafik eingeblendet. Die Funktion wird beim Absenden des Formulars aufgerufen
    document.getElementById("img_loading").style.display = "inline-block";
}
/* ]]> */
</script>

 

[Manuel]

Danke für dei Hilfe