Formulardaten über AJAX überprüfen und speichern

AJAX oder „Asynchronous Javascript and XML” ist keine Server-Plattform, (auch kein Putzmittel ) sondern vielmehr eine Ansammlung von Technologien für anspruchsvolles Web 2.0 auf HTML-Oberflächen.

AJAX stellt eine Kombination aus bereits länger existierenden Technologien dar. JavaScript wird benutzt um im Browser des Benutzers eine Anfrage zum Server zu stellen. Wenn diese Anfrage vom Server bearbeitet wurde (z.B.: über PHP, ASP, CGI oder Perl), wird eine Funktion beim Benutzer ausgeführt. Die Nachrichten die der Server verschickt, sind hierbei oft in XML codiert. Die Codierung in XML ist jedoch nicht zwingend erforderlich, es kann auch eine Codierung als JSON oder als simpler Text erfolgen.

Demo

Funktionsweise

Ohne lästigen Seitenwechsel werden die eingegebenen Daten im Formular überprüft und gespeichert. Die Formulardaten werden über JavaScript an das PHP-Script gesendet und dort überprüft. Bei einer fehlerhaften Eingabe werden Meldungen an das Formular zurück gegeben. Ansonsten können die Daten als E-Mail gesendet, in einer Datei oder Datenbank gespeichert werden.

An der Funktionsweise des Formulars, war mir eine klare Trennung von HTML, CSS, JavaScript und PHP wichtig. Eine ausführliche Beschreibung dazu, finden Sie in den folgenden Quelltexten.

Quelltext:  AusblendenKopierenLinkZeilen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="de">
 <head>
  <meta charset="UTF-8">
  <title>Formulardaten über AJAX überprüfen und speichern</title>

  <style>
  body {
   font-family: Arial, Sans-Serif;
   background-color: Whitesmoke;
  }

  var {
   color: Red;
  }
  </style>


  <script>
  // Das XMLHttpRequest-Objekt setzen
  var xhr = new XMLHttpRequest();

  // Diese Funktion beim laden der Seite starten
  window.addEventListener("load", function() {

   // Dem HTML-Button (name="senden") den Event-Handler: "click" zuweisen
   // dieser ruft dann (beim klicken) die Funktion: eintragen() auf.
   document.getElementsByName("senden")[0].addEventListener("click", eintragen);
  });

  function eintragen() {
   // Die Formulardaten holen
   var daten = new FormData(document.getElementsByTagName("form")[0]);

   // Die Datei: "check.php" über dem HTTP-Stream öffnen
   xhr.open("POST", "check.php", true);

   // Die Formulardaten senden
   xhr.send(daten);

   // Auf eine Antwort warten
   xhr.onreadystatechange = function() {

    // Daten werden (vom PHP-Script) empfangen
    if (xhr.readyState == 4 &&
        xhr.status == 200) {

     // Den Inhalt von 'responseText' überprüfen
     if (xhr.responseText == "OK") {

      // Eine Meldung ausgeben
      document.getElementsByTagName("form")[0].innerHTML = "Die Daten wurden gesendet.";
     }
     else {

      // Die Daten in einzelne Objekte zerlegen
      var objekt = JSON.parse(xhr.responseText);

      // Die HTML-Elemente (var) mit den Daten befüllen
      document.getElementsByTagName("var")[0].innerHTML = objekt.name;
      document.getElementsByTagName("var")[1].innerHTML = objekt.agb;
      document.getElementsByTagName("var")[2].innerHTML = objekt.txt;
     }
    }
   }
  }
  </script>


 </head>
<body>

<form>

 <p>
  <label>Name: <var>*</var><br>
  <input type="text" name="name"></label>
 </p>

 <p>
  <label><input type="checkbox" name="agb"> AGB gelesen</label>
  <var>*</var>
 </p>

 <p>
  <label>Text: <var>*</var><br>
  <textarea name="txt" rows="4" cols="25"></textarea></label>
 </p>

 <p>
  <input type="button" name="senden" value="Absenden">
 </p>

</form>

</body>
</html>

Daten empfangen

In der folgenden Datei ("check.php") werden die gesendeten Daten empfangen und überprüft.

Quelltext:  check.php AusblendenKopierenLinkZeilen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<?php
// Formulardaten über AJAX überprüfen und speichern

// Wurden Daten über 'POST' gesendet
if ($_SERVER["REQUEST_METHOD"] == "POST") {

 
$fehleingabe = array(); // Dieses Array speichert die Fehleingaben

 // Den Namen überprüfen
 
if ($_POST["name"] != "Werner") {

  
// Die Fehleingabe im Array speichern
  
$fehleingabe["name"] = "Der Name ist leider falsch!";
 }
 else {

  
// Die Fehleingabe leer lassen!
  
$fehleingabe["name"] = "";
 }

 
// Die AGB (Checkbox) überprüfen
 
if (!isset($_POST["agb"])) {
  
$fehleingabe["agb"] = "Die AGB bitte bestätigen!";
 }
 else {
  
$fehleingabe["agb"] = "";
 }

 
// Den Text (Textarea) überprüfen
 
if (strlen($_POST["txt"]) < 10) {
  
$fehleingabe["txt"] = "Text mit min. 10 Zeichen!";
 }
 else {
  
$fehleingabe["txt"] = "";
 }

 
// Sind Fehleingaben vorhanden?
 
if (strlen(implode($fehleingabe)) > 0) {

  
// Ja
  // Rückgabe an JavaScript
  // Das Array mit: json_encode() serialisieren
  
echo json_encode($fehleingabe);
 }
 else {

  
// Nein
  // Rückgabe an JavaScript
  
echo 'OK';
  
// Die Daten nun als E-Mail senden, in einer 
  // Datei oder Datenbank speichern.
 
}

}
?>

Es geht noch einfacher!

Möchte man das Formular und das PHP-Script in einer einzigen Datei zusammen fassen, so lässt sich dies auch realisieren.

Quelltext:  AusblendenKopierenLinkZeilen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<?php
// Formulardaten über AJAX überprüfen und speichern (Beispiel 2)

// Wurden Daten über 'POST' gesendet
if ($_SERVER["REQUEST_METHOD"] == "POST"):

// Dieses Array speichert die Fehleingaben
$Fehler = ["name"=>"""agb"=>"""txt"=>""];

// Fehleingaben überprüfen
$Fehler["name"] = $_POST["name"] != "Werner" 'Der Name ist leider falsch!' '';
$Fehler["agb"] = !isset($_POST["agb"]) ? 'Die AGB bitte bestätigen!' '';
$Fehler["txt"] = strlen($_POST["txt"]) < 10 'Text mit min. 10 Zeichen!' '';

 
// Sind Fehleingaben vorhanden?
 
if (strlen(implode($Fehler)) > 0):

  
// Ja
  // Rückgabe an JavaScript
  // Das Array mit: json_encode() serialisieren
  
echo json_encode($Fehler);
 else:

  
// Nein
  // Rückgabe an JavaScript
  
echo 'OK';
  
// Die Daten nun als E-Mail senden, in einer
  // Datei oder Datenbank speichern.
 
endif;

 exit; 
// Wichtig, ansonsten wird der HTML-Körper gesendet!
endif;
?>
<!DOCTYPE html>
<html lang="de">
 <head>
  <meta charset="UTF-8">
  <title>Formulardaten über AJAX überprüfen und speichern</title>

  <style>
  body {
   font-family: Arial, Sans-Serif;
   background-color: Whitesmoke;
  }

  var {
   color: Red;
  }
  </style>


  <script>
  // Das XMLHttpRequest-Objekt setzen
  var xhr = new XMLHttpRequest();

  // Diese Funktion beim laden der Seite starten
  window.addEventListener("load", function() {

   // Dem HTML-Button (name="senden") den Event-Handler: "click" zuweisen,
   // dieser ruft dann (beim klicken) die Funktion: eintragen() auf.
   document.getElementsByName("senden")[0].addEventListener("click", eintragen);
  });

  function eintragen() {
   // Die Formulardaten holen
   var daten = new FormData(document.getElementsByTagName("form")[0]);

   // Die aktuelle Datei über dem HTTP-Stream öffnen
   xhr.open("POST", document.URL, true);

   // Die Formulardaten senden
   xhr.send(daten);

   // Auf eine Antwort warten
   xhr.onreadystatechange = function() {

    // Daten werden (vom PHP-Script) empfangen
    if (xhr.readyState == 4 &&
        xhr.status == 200) {

     // Den Inhalt von 'responseText' überprüfen
     if (xhr.responseText == "OK") {

      // Eine Meldung ausgeben
      document.getElementsByTagName("form")[0].innerHTML = 'Die Daten wurden gesendet.';
     }
     else {

      // Die Daten in einzelne Objekte zerlegen
      var objekt = JSON.parse(xhr.responseText);

      // Die HTML-Elemente (var) mit den Daten befüllen
      document.getElementsByTagName("var")[0].innerHTML = objekt.name;
      document.getElementsByTagName("var")[1].innerHTML = objekt.agb;
      document.getElementsByTagName("var")[2].innerHTML = objekt.txt;
     }
    }
   }
  }
  </script>


 </head>
<body>

<form>

 <p>
  <label>Name: <var>*</var><br>
  <input type="text" name="name"></label>
 </p>

 <p>
  <label><input type="checkbox" name="agb"> AGB gelesen</label>
  <var>*</var>
 </p>

 <p>
  <label>Text: <var>*</var><br>
  <textarea name="txt" rows="4" cols="25"></textarea></label>
 </p>

 <p>
  <input type="button" name="senden" value="Absenden">
 </p>

</form>

</body>
</html>

Siehe auch: Demo für die Anwendung der Fetch-API

Verkettete Auswahllisten dynamisch aus einer DB-Tabelle generieren - XMLHttpRequest

Auswahlliste als Filter in einer DB-Tabelle einsetzen - XMLHttpRequest

Suchanfrage an eine Datenbank über AJAX senden und empfangen - XMLHttpRequest / Fetch-API

Mit JSON Daten zwischen JavaScript und PHP austauschen - XMLHttpRequest