On-page Formular-Übermittlung

Die meisten Formulare, die man auf Webseiten so vorfindet enden in der Regel damit, dass nach dem Klicken des Buttons zum Übermitteln der Daten eine neue Seite geladen wird. Für viele Anwendung ist das natürlich auch das, was am meisten Sinn macht. Es gibt allerdings ebenfalls zahlreiche Situationen, wo das Resultat der Formulareingaben einen Effekt auf die gerade sichtbare Seite hat. Häufig möchte man dann auch, dass die bereits gesetzten Formulareingaben beim Übermitteln erhalten bleiben und weiter angepasst werden können.

 

In einem solchen Fall kann man nicht direkt das Formular per GET- oder POST-Methode an ein entsprechendes PHP-File senden, ohne ein Neuladen der Seite zu bewirken. Als mögliche Lösung dient jQuery, ein JavaScript-Plugin.

 

Der, zumindest bei kleinen Formularen, nicht sehr lange jQuery-Code sieht zum Beispiel so aus:

Dieser Code kann entweder als separates .js-File oder direkt im HTML/PHP-File mit <script>-Tags eingefügt werden.

 

Die Funktionsweise ist dabei wie folgt: Beim Laden der Seite wird ein Listener gestartet, welcher darauf wartet, dass der Button mit der id "submit" gedrückt wird (Das Attribut type="submit" ist nicht notwendig). Dann wird ein POST-Request an die Datei submit.php gesendet, dabei werden die einzelnen Formularfelder anhand ihrer ID gesucht und deren Wert übermittelt.

 

Die Datei submit.php ist grundsätzlich identisch mit der Datei, die benötigt werden würde, wenn die Übermittlung mittels einem regulären POST oder GET-Request umgesetzt worden wäre. Die übermittelten Werte werden validiert und eine entsprechende SQL-Abfrage konstruiert und abgeschickt. Die aus der Datenbank ausgelesenen Daten werden dann in eine HTML-Struktur abgefüllt, welche dann mit dem Befehl echo zurückgegeben wird. Diese Daten werden vom aufrufenden JavaScript entgegengenommen und können dann ohne Neuladen der Seite eingebaut werden. In diesem Beispiel wurde einfach ein leerer <div> mit der ID "results" vorbereitet, welcher vom Skript gefunden wird, und dann mit dem in der PHP-Datei assemblierten HTML-Code befüllt wird.