Formular über AJAX erstellen und Daten versenden

Ohne lästigen Seitenwechsel wird das folgende Formular geladen und gesendet. Es wird über JavaScript eine Anfrage an ein PHP-Script gesendet, dieses erzeugt dann das Formular das dann wiederum mit JavaScript ausgegeben wird.

Der Quelltext ist ohne weitere Erklärung, habe auf meiner Website genug Beispiele (siehe Tipps) wo alles genau kommentiert wurde.

Quelltext „index.htmKopierenAusblendenZeilen

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
<!DOCTYPE html>
<html lang="de">
 <head>
  <meta charset="UTF-8">
  <title>Formular über AJAX erstellen und Daten versenden</title>

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

  form#form {
   background-color: #DDDDDD;
   padding: 5px;
  }
  </style>


  <script>
  const XHR = new XMLHttpRequest();

  function zeigeFormular() {
   XHR.open("GET", "antwort.php" +
    "?zeigeFormular", true);
   XHR.send(null);
   XHR.onreadystatechange = function () {
    if (XHR.readyState == 4 &&
       XHR.status == 200) {
     document.getElementById("ausgabe").innerHTML = XHR.responseText;
    }
   }
  }

  function sendeFormular() {
   XHR.open("POST", "antwort.php" + 
    "?sendeFormular", true);
   let daten = new FormData(document.getElementById("form"));
   XHR.send(daten);
   XHR.onreadystatechange = function () {
    if (XHR.readyState == 4 &&
       XHR.status == 200) {
     document.getElementById("ausgabe").innerHTML = XHR.responseText;
    }
   }
  }
  </script>


 </head>
<body>

<p><button type="button" onClick="zeigeFormular()">Formular anzeigen</button></p>

<div id="ausgabe"></div>

</body>
</html>

Das HTML-Formular könnte man auch per JavaScript erzeugen aber so hat man die Möglichkeit über PHP bestimmte Werte (zum Beispiel einen CSRF-Token) mit zu geben.

Quelltext „antwort.phpKopierenAusblendenZeilen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
// Formular anzeigen
if (isset($_GET["zeigeFormular"])) {

 echo 
'<form id="form" method="post">
 <label>Name: <input type="text" name="name"></label>  
 <button type="button" onClick="sendeFormular()">Formular senden</button>
 </form>';
}

// Formular wurde abgesendet
if (isset($_GET["sendeFormular"])) {

 if (!empty(
$_POST["name"])) {
  echo 
'<p>Dein Name ist: ' htmlspecialchars($_POST["name"], ENT_HTML5'UTF-8') . '</p>';
 }
 else {
  echo 
'<p>Es wurde nichts eingetragen!</p>';
 }
}
?>

Tipps

Formulardaten über AJAX überprüfen und speichern

Verkettete Auswahllisten dynamisch aus einer DB-Tabelle generieren

Auswahlliste als Filter in einer DB-Tabelle einsetzen

Suchanfrage an eine Datenbank über AJAX senden und empfangen

Mit JSON Daten zwischen JavaScript und PHP austauschen