Daten über eine Auswahlliste in ein Formular laden

Oftmals müssen Daten aus einer DB-Tabelle in ein Formular geholt werden um diese dann weiter verarbeiten zu können (in einer anderen DB-Tabelle, Datei speichern oder als E-Mail versenden etc.).

Eine der besten Möglichkeiten zum Austausch von Informationen zwischen Anwendungen, die in verschiedenen Sprachen geschrieben wurden, ist die Verwendung des JSON-Formats (JavaScript Object Notation). Dank seiner Einheitlichkeit und Einfachheit hat JSON XML als Standardformat für den Datenaustausch in Software, insbesondere in Webdiensten, fast vollständig ersetzt.

👁️‍ Live-Demo anzeigen - Daten über eine Auswahlliste in ein Formular laden
Live-Demo - Daten über eine Auswahlliste in ein Formular laden

Hier zeige ich wie Daten über JavaScript, dem JSON-Format und PHP, von der DB-Tabelle gelesen und in ein Formular zur weiteren Verwendung eingefügt werden können. Die Anleitung wie alles zusammen miteinander funktioniert finden Sie (wie immer) im Quelltext der folgenden Datei.

Quelltext:  formular.php Ausblenden ❘ Kopieren ❘ Link ❘ 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
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<?php
/*
 * Daten über eine Auswahlliste in ein Formular laden
 */

// Verbindung zur Datenbank
$db = new PDO('mysql:host=localhost;dbname=test;charset=utf8', 'root', '');

// HTML-Auswahlliste erstellen
$auswahlliste = '<p><label>Name auswählen: <select id="auswahl"><option></option>';

// ID und Namen aus der DB-Tabelle auslesen
$select = $db->query("SELECT `id`, `name` FROM `Tabelle`");

if ($select->rowCount() > 0) {

 foreach ($select as $sel) {
  $auswahlliste .= '<option value="' . $sel["id"] . '">' . $sel["name"] . '</option>';
 }
}
$auswahlliste .= '</select></label> <input type="button" value="&gt;" id="auswahl_senden"></p>';

// Abfrage der DB-Tabelle
if (isset($_GET["auswahl"])) {

 // Name, E-Mail und das Datum aus der DB-Tabelle auslesen
 $select = $db->prepare("SELECT`name`, `email`, `datum` FROM `Tabelle` WHERE `id` = :id");

 if ($select->execute([":id" => $_GET["auswahl"]])) {
  $result = $select->fetch();

  // Die Daten in ein Array setzen
  $arr = [
     'name' => $result["name"],
     'email' => $result["email"],
     'datum' => $result["datum"],
           ];

  // Das Array als JSON-Format ausgeben
  exit(json_encode($arr));
 }
}

// Die gesendeten POST Daten vom Formular abrufen
if ($_SERVER["REQUEST_METHOD"] == "POST") {

 // Hier werden die Formulardaten ausgegeben
 echo '<p>' . htmlspecialchars($_POST["name"]) . '<br>' .
  htmlspecialchars($_POST["email"]) . '<br>' .
  htmlspecialchars($_POST["datum"]) . '</p>' .
  '<p>' . htmlspecialchars($_POST["text"]) . '</p>';
 exit;
}
?>
<!DOCTYPE html>
<html lang="de">
 <head>
  <meta charset="UTF-8">
  <title>Formular</title>

<style>
body {
 font-family: Verdana, Arial, Sans-Serif;
 font-size: 1rem;
 background: #FFF4EA;
}

div#meldung {
 font-style: Oblique;
}

input[type="text"] {
 width: 200px;
}

textarea {
 width: 275px;
 height: 150px;
}

fieldset {
 display: Inline-Block;
}
</style>

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

// Auswahl über GET senden
function auswahlSenden() {

   // Überprüfen ob nicht das erste Element in der Auswahlliste ausgewählt wurde
   if (document.getElementById("auswahl").options[0].selected == false) {

    // Den Wert des ausgewählten Elements in der Auswahlliste auslesen
    var sel = document.getElementById("auswahl").options[document.getElementById("auswahl").selectedIndex].value;

    // Den Wert (sel) an diese Datei über GET senden
    xhr.open("GET", document.URL + "?auswahl=" + sel);
    xhr.send(null);

    // Auf eine Antwort vom Webserver (PHP-Script) warten
    xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {

     // Das JSON-Format in ein Objekt umwandeln
     var obj = JSON.parse(xhr.responseText);

     // Die Formularfelder mit den Werten des Objekts befüllen
     document.getElementById("name").value = obj.name;
     document.getElementById("email").value = obj.email;
     document.getElementById("datum").value = obj.datum;

   }
  }
 }
}

// Die Formulardaten versenden
function formularSenden() {

 // Überprüfen ob alle Plichtfelder (required) ausgefüllt sind
 if (document.getElementById("Form").reportValidity()) {

  // Die Formulardaten an diese Datei über POST senden
  xhr.open("POST", document.URL, true);
  xhr.send(new FormData(document.getElementById("Form")));

  // Auf eine Antwort vom Webserver (PHP-Script) warten
  xhr.onreadystatechange = function () {
   if (xhr.readyState == 4 && xhr.status == 200) {

     // Eine Meldung ausgeben
    document.getElementById("meldung").innerHTML = xhr.responseText;
   }
  }
 }
}

 // Event-Handler der Buttons mit JavaScript setzen
window.addEventListener("DOMContentLoaded", () => {
 document.getElementById("auswahl_senden").addEventListener("click", auswahlSenden);
 document.getElementById("formular_senden").addEventListener("click", formularSenden);

 document.getElementById("formular_reset").addEventListener("dblclick", function () {
  document.getElementById("meldung").innerHTML = "";
  document.querySelector('[id="Form"]').reset();
 });
});
</script>

 </head>
<body>

<?=$auswahlliste;?>

<fieldset>
 <legend>Formular</legend>

<form id="Form">

<p>
 <label>Name: <input type="text" name="name" id="name" required="required"></label>
</p>

<p>
 <label>E-Mail: <input type="text" name="email" id="email" required="required"></label>
</p>

<p>
 <label>Datum: <input type="text" name="datum" id="datum" required="required"></label>
</p>

<p><label>Text:<br>
 <textarea name="text" required="required"></textarea></label>
</p>

<p>
 <button type="button" id="formular_reset" title="Zum abbrechen 2 mal klicken!">Abbrechen</button> -
 <button type="button" id="formular_senden">Formular senden</button>
</p>

</form>

</fieldset>

<div id="meldung"></div>

</body>
</html>

DB-Tabelle

Folgende DB-Tabelle wurde im Anwendungsbeispiel verwendet:

CREATE TABLE `tabelle` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
  `email` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
  `datum` date NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

INSERT INTO `tabelle` (`id`, `name`, `email`, `datum`) VALUES
(1,	'Rafael Martinez',	'martinez@online.com',	'2020-09-11'),
(2,	'Margaret Maier',	'm.eier@nest.de',	'2020-09-28'),
(3,	'Torben Wilson',	'wilson@example.com',	'2020-09-22');

Beispiel mit jQuery

[Bildschirmfoto] Beispiel mit jQuery

Quelltext:  formular.php Ausblenden ❘ Kopieren ❘ Link ❘ 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
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<?php
/*
 * Daten über eine Auswahlliste in ein Formular laden (Beispiel mit jQuery)
 */

// Verbindung zur Datenbank
$db = new PDO('mysql:host=localhost;dbname=test;charset=utf8', 'root', '');

// HTML-Auswahlliste erstellen
$auswahlliste = '<p><label>Name auswählen: <select id="auswahl"><option></option>';

// ID und Namen aus der DB-Tabelle auslesen
$select = $db->query("SELECT `id`, `name` FROM `Tabelle`");

if ($select->rowCount() > 0) {

 foreach ($select as $sel) {
  $auswahlliste .= '<option value="' . $sel["id"] . '">' . $sel["name"] . '</option>';
 }
}
$auswahlliste .= '</select></label> <input type="button" value="&gt;" id="auswahl_senden"></p>';

// Abfrage der DB-Tabelle
if (isset($_GET["auswahl"])) {

 // Name, E-Mail und das Datum aus der DB-Tabelle auslesen
 $select = $db->prepare("SELECT`name`, `email`, `datum` FROM `Tabelle` WHERE `id` = :id");

 if ($select->execute([":id" => $_GET["auswahl"]])) {
  $result = $select->fetch();

  // Die Daten in ein Array setzen
  $arr = [
     'name' => $result["name"],
     'email' => $result["email"],
     'datum' => $result["datum"],
           ];

  // Das Array als JSON-Format ausgeben
  exit(json_encode($arr));
 }
}

// Die gesendeten POST Daten vom Formular abrufen
if ($_SERVER["REQUEST_METHOD"] == "POST") {

 // Hier werden die Formulardaten ausgegeben
 echo '<p>' . htmlspecialchars($_POST["name"]) . '<br>' .
  htmlspecialchars($_POST["email"]) . '<br>' .
  htmlspecialchars($_POST["datum"]) . '</p>' .
  '<p>' . htmlspecialchars($_POST["text"]) . '</p>';
 exit;
}
?>
<!DOCTYPE html>
<html lang="de">
 <head>
  <meta charset="UTF-8">
  <title>Formular</title>

<style>
body {
 font-family: Verdana, Arial, Sans-Serif;
 font-size: 1rem;
 background: #DFF4FF;
}

div#meldung {
 font-style: Oblique;
}

input[type="text"] {
 width: 200px;
}

textarea {
 width: 275px;
 height: 150px;
}

fieldset {
 display: Inline-Block;
}
</style>

<!-- jQuery einbinden -->
<script src="jquery.js"></script>

<script>
$(document).ready(function () {

 // Auswahl über GET senden
 $("#auswahl_senden").click(function () {
  var sel = $("#auswahl").val();

  if (sel) {
    $.ajax({
     type: "GET",
     url: "formular.php",
     data: {auswahl: sel},
     success: function (data) {
      const obj = JSON.parse(data);
      $("#name").val(obj.name);
      $("#email").val(obj.email);
      $("#datum").val(obj.datum);
     }
   });
  }

 });

 // Die Formulardaten versenden
 $("#formular_senden").click(function () {

  if ($("#Form")[0].reportValidity()) {
    $.ajax({
     type: "POST",
     url: "formular.php",
     data: $("#Form").serialize(),
     success: function (data) {
      $("#meldung").html(data);
    }
   });
  }

 });

 // Button zum zurücksetzen
 $("#formular_reset").dblclick(function () {
  $("#meldung").html("");
  $("#Form")[0].reset();
 });

});
</script>

 </head>
<body>

<?=$auswahlliste;?>

<fieldset>
 <legend>Formular</legend>
<form id="Form">

<p>
 <label>Name: <input type="text" name="name" id="name" required="required"></label>
</p>

<p>
 <label>E-Mail: <input type="text" name="email" id="email" required="required"></label>
</p>

<p>
 <label>Datum: <input type="text" name="datum" id="datum" required="required"></label>
</p>

<p><label>Text:<br>
 <textarea name="text" required="required"></textarea></label>
</p>

<p>
 <button type="button" id="formular_reset" title="Zum abbrechen 2 mal klicken!">Abbrechen</button> -
 <button type="button" id="formular_senden">Formular senden</button>
</p>

</form>

</fieldset>

<div id="meldung"></div>

</body>
</html>

➤ Gefällt Ihnen das Skript oder haben Sie einen Fehler gefunden? Dann freue ich mich auf Ihren Kommentar.

Tipps

Mehr zum Thema Formulare:

Verkettete Auswahllisten dynamisch aus einer DB-Tabelle generieren

Mit JSON Daten zwischen JavaScript und PHP austauschen

Suchanfrage an eine Datenbank über AJAX senden und empfangen