jQuery: Komplettes Formular abschicken und Inhalt mit Ajax empfangen
Tutorial von Stefan Trost | Letztes Update am 30.04.2021 | Erstellt am 12.08.2012
In diesem Tutorial möchte ich zeigen, wie man mit jQuery und Ajax ein vollständiges Formular abschicken und an ein beliebiges Skript senden kann.
Für das folgende Beispiel brauchen wir einerseits eine HTML Seite mit unserem Formular und andererseits ein PHP-Skript, dass wir unter script.php abspeichern.
Die HTML Seite
Unsere HTML Seite enthält folgenden Inhalt, wobei ich der Übersicht halber extra auf jegliches Design und jegliche Meta-Tags und so weiter verzichtet habe:
<html>
<head></head>
<body>
<form id="form1" action="">
<p>Geben Sie bitte Ihren Namen ein:</p>
<input name="input1" value="">
<input type="submit" value="Senden">
</form>
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#form1").submit(function(e){
e.preventDefault();
$.post("script.php",$("#form1").serialize(),function(msg){
alert(msg);
});
});
});
</script>
</body>
</html>Im oberen Teil sehen wir unser Formular "form1", das aus einem Eingabefeld "input1" und einem Submit-Button zum absenden der Daten besteht. Darunter binden wir eine aktuelle jQuery Version ein und schreiben in einem Skript-Bereich die nötigen Anweisungen, um das Absenden des Formulars abzufangen.
Die Funktion $(document).ready(... wird ausgeführt, sobald die Seite komplett geladen ist. Mit $("#form1").submit() fangen wir das Submit-Ereignis unseres Formulars ab. Das bedeutet, klickt man auf den Submit-Button, passiert das, was wir in dieser Funktion definiert haben. Zunächst benutzen wir hier ein e.preventDefault(). Das bedeutet, dass wir die normale Aktion (Abschicken und Seite neu laden) unterbinden. Stattdessen senden wir mit $.post() und $("#form1").serialize() alle Daten des Formulars an das Skript "script.php". Die Ausgabe dieses Skripts fangen wir mit der Funktion dahinter (msg) ab und geben die Ausgabe mit einem alert() aus.
Es soll sich also nach dem Drücken des Submit-Buttons ein Alert-Dialog öffnen, in dem das Ergebnis des Skripts ausgegeben wird.
Das Skript
Unsere Skript Datei "script.php" hat folgenden Inhalt:
<?php echo 'Hallo ',$_POST['input1'],'!'; ?>
Die per POST abgesendeten Daten aus unserem Formular fangen wir mit $_POST[] ab und geben diesen Inhalt zusammen mit "Hallo" und "!" aus. Hat man also in dem Formular vorher seinen Namen angegeben und klickt auf den Submit-Button, wird sein Name in einem JavaScript-Alert angezeigt.
Dieses kleine Beispiel sollte nur kurz die Funktionsweise von einem jQuery Ajax Aufruf beim Absenden von einem Formular verdeutlichen. Natürlich kann man diese Funktion und vor allem das Skript noch sinnvoll erweitern und mehr daraus machen. Vor allem sollte man die Daten immer prüfen, bevor man sie weiterverarbeitet, um eine mögliche Manipulation durch den Nutzer zu verhindern. Da hier nur das grobe Konzept gezeigt werden sollte, wurde hier auf diese Dinge verzichtet.
Solltet Ihr noch Fragen haben, schreibt einfach einen Kommentar. Ich führe gerne das Tutorial noch weiter aus oder schreibe neue Tutorials zu gewünschten Themen.
Über den Autor
Software von Stefan Trost finden Sie auf sttmedia.de. Benötigen Sie eine individuelle Software nach Ihren eigenen Wünschen? Schreiben Sie uns: sttmedia.de/kontakt
Profil anzeigen
Ähnliche Themen
jQuery: HTML5 Canvas mit Ajax an Server senden
Tutorial | 0 Kommentare
HTML5 Canvas als Bild an Server senden und speichern
Tutorial | 0 Kommentare
Formulardaten von mehreren Formularen via Ajax an PHP-Datei übergeben
Frage | 3 Antworten
PHP: Formular-Eingaben als Array an PHP Skript schicken
Tipp | 0 Kommentare
Bild vor dem Upload im Browser verkleinern
Tutorial | 5 Kommentare
jQuery: Hinweis beim Verlassen der Seite wenn ein Formular noch nicht abgeschickt wurde
Tutorial | 1 Kommentar
Delphi/Lazarus: STRG+C in Memo oder Edit abfangen und Zwischenablage manipulieren
Tutorial | 0 Kommentare
Wichtiger Hinweis
Bitte beachten Sie: Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.
Jetzt mitmachen
Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.
Jetzt spare ich mir Arbeit und muss jedes Feld nicht einzel senden. Auf jeden Fall sehr geholfen!
Danke!
05.10.2013 um 15:12
SUPER GENIAL!!!! DANKE .. auch mir viel Arbeit erspart. Weiter so, bin gerne hier unterwegs;)
Grüße keeboo
30.10.2013 um 20:56
Hallo, erst einmal vielen Dank, tun schon mal ansatzweise das was ich möchte.
Hätte aber ganz gern, das die Antwort in einem Inputfeld ausgegeben wird ...
24.08.2014 um 06:18
Hab mal etwas versucht und funktioniert ...
Du musst den Code so ändern:
$.post("script.php", $("#form1").serialize(), function(data) { $("#ausgabe").val(data); } );Dann wird er im Input-Feld mit der ID ausgabe angezeigt.
24.08.2014 um 07:11
Dies ist eine sehr saubere und vor allen leicht verständlich erklärte Lösung, nach so einem Ansatz habe ich die ganze Zeit gesucht. Vielen Dank! =)
19.09.2015 um 13:09
Danke für das Tut! Klappt wunderbar.
Ich hätte nur noch eine Frage: Ist es möglich, dass man beim Submit des Formulars, Werte aus einem ganz anderen Formular mit an die script.php übergeben kann?
Es lässt sich leider nicht ändern, dass ich mind. zwei Formulare habe und in einem davon stehen von Benutzer zu Benutzer unterschiedliche Werte drin, die für das andere Formular wichtig sind.
(ich habe hier auch eine Frage erstellt, aber irgendwie wird sie mir nicht angezeigt..)
LG
05.01.2016 um 16:13
Deine Frage findest du hier. Da du als Gast geschrieben hast, muss der Beitrag erst freigeschaltet werden und ist nicht sofort sichtbar.
05.01.2016 um 17:49
Danke schön. Ich hatte mir den Link hinterlegt, der blieb nur leer (wurde wohl geändert). Danke nochmal. :)
06.01.2016 um 09:17
Kein Problem, dafür sind wir da.
Ja, der Link hat sich geändert, da wir das Thema verschoben haben. Wäre vielleicht eine Idee für die Zukunft, jedem Thema eine eindeutige ID oder so etwas zu geben, damit man auch als Gast seine Themen einfach wieder findet.
07.01.2016 um 14:43
In Anlehnung und Erweiterung des tollen Jquery Skripts möchte ich anfragen, ob wir das hier realisieren könnten. Die Ausgabe endet also nun mit alert(msg);
Was ich noch interessanter fände, wäre man die Ausgabe nun überhalb des Input Feldes platziert und dann noch farblich bzw. per Animation (für eine bestimmte Zeit z.B. 10 sek.) anzeigt. Wie ist das möglich? Ich fange gerade mit JS an und bin ein bissl am basteln.
30.07.2016 um 04:24
Ich werde die Idee aufgreifen und in ein Tutorial packen.
Kann allerdings noch nicht sagen, wie lange es dauern wird, bis das Tutorial fertig ist, da dies ja einige Zeit und Arbeit erfordert.
31.07.2016 um 15:52
Wow wie einfach. Genau so muss das. Nicht wie der elend lange Code bei anderen Tutorials.
Danke
02.03.2022 um 19:43