Formular über AJAX erstellen und Daten versenden

Ohne lästigen Seitenwechsel wird das Formular geladen und gesendet.

Der Quelltext ist ohne weitere Erklärung, habe auf meiner Site genug Beispiele 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 mit zu geben - CSRF-Token für Formulare erstellen

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