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.

QuelltextKopierenAusblendenZeilen

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.phpKopierenAusblendenZeilen

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

Dateibrowser
Ein einfacher Dateibrowser, ideal um PHP-Scripte auf einem lokalen Webserver zu testen, die PHP-Scripte müssen dann nicht mehr umständlich über die Adresszeile des Browsers aufgerufen werden.
Erster Eintrag in eine MySQL-Datenbank mit PHP
Eine Anleitung wie man ein Nachrichten-System mit einer MySQL (oder MariaDB)-Datenbank über PHP realisieren kann. Komplett mit Formularen zum eintragen, anzeigen und bearbeiten der Daten.
Umstellung von der PHP-Funktion mysql() zu mysqli()
Zur Zeit stellen viele Provider auf PHP 7 um, mit dieser neuen PHP-Version werden viele "alte" Scripte nicht mehr laufen die auf eine Datenbank zugegriffen haben.
Diese Schlagwörter könnten Sie interessieren:
Metadaten Sicherheit ASCII Quelltext Zoom-Funktion Sprachumschaltung Mehrfachauswahl Canvas Textgestaltung Dateibrowser Zeitansage Datenschutz-Hinweis Mimetypen Kommentar-Box Event-Kalender SQLite Mauszeiger Wecker localStorage Favicon