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.

Anwendungsdemo

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  Kopieren ❘ Ausblenden ❘ Zeilen

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”  Kopieren ❘ Ausblenden ❘ Zeilen

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.

✘ Datei "scripts/formulardaten_ueber_ajax_ueberpruefen_und_speichern/check2.php" wurde nicht gefunden!

Tipps

Text-Dateien über PHP laden und bearbeiten
Über PHP lassen sich Text-Dateien in ein Formular laden und bearbeiten. Der geänderte Text wird, nach dem absenden des Formulars, wieder in der Datei gespeichert.
Audio-Player
Mit diesem Audio-Player kann man Audio-Dateien über JavaScript steuern.
Daten auf mehreren Seiten aufteilen / Kombinierte Formular.- und Blätterfunktion
Damit nicht alle Daten einer DB-Tabelle auf einmal auf der Seite zu sehen sind, sondern übersichtlich auf mehreren Seiten verteilt stehen, benutzt man eine Seitennavigation zum blättern (Pagination).
Diese Schlagwörter könnten Sie interessieren:
PHP-Fehlermeldungen CSS-Counter RSS Feed Webseitenschutz Zeitfunktionen Zoom-Funktion Zeichenkodierung Linkliste Lokaler Webserver Zeichnen localStorage Seitenformatierung Dateibrowser Suchmaschine Marquee Fotoalbum Favicon Audio-Player Canvas JSON