14 16 Stimmen

jQuery: Komplettes Formular abschicken und Inhalt mit Ajax empfangen

Tutorial von Stefan Trost | 12.08.2012 um 21:15 Uhr

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.

AntwortenPositivNegativDatumStimmen
00 Stimmen

Jetzt spare ich mir Arbeit und muss jedes Feld nicht einzel senden. Auf jeden Fall sehr geholfen!

Danke!
05.10.2013 um 15:12 Uhr

AntwortenPositiv Negativ
00 Stimmen

SUPER GENIAL!!!! DANKE .. auch mir viel Arbeit erspart. Weiter so, bin gerne hier unterwegs;)

Grüße keeboo
30.10.2013 um 20:56 Uhr

AntwortenPositiv Negativ
00 Stimmen

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 Uhr

AntwortenPositiv Negativ
02 Stimmen

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 Uhr

Positiv Negativ
00 Stimmen

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 Uhr

AntwortenPositiv Negativ
00 Stimmen

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 Uhr

AntwortenPositiv Negativ

AskingBox Moderation

Profil anzeigen | Nachricht
Avatar
00 Stimmen

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 Uhr

Positiv Negativ
00 Stimmen

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 Uhr

Positiv Negativ

AskingBox Moderation

Profil anzeigen | Nachricht
Avatar
00 Stimmen

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 Uhr

Positiv Negativ

Nerdy

Profil anzeigen | Nachricht
Avatar
00 Stimmen

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 Uhr

AntwortenPositiv Negativ

Stefan Trost

Profil anzeigen | Nachricht
Avatar
11 Stimme

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 Uhr

Positiv Negativ
Antworten

Über den Autor

Avatar AutorSoftware 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 | Nachricht

 

Ähnliche Themen

jQuery: Element ersetzen
Frage | 1 Antwort

Wichtiger Hinweis

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.