JavaScript - Formularfelder dynamisch hinzufügen
Geschenke vom Weihnachtsmann
<script>
// Formularfelder dynamisch hinzufügen
var feld = 0;
var feldm = 0;
function feld_plus() {
if (feld <= 9) {
feld++;
document.getElementById('dynamic_input').innerHTML = "";
for (var zaehler = 1; zaehler <= feld; zaehler++) {
var label = "Feld " + zaehler;
var inhalt = document.getElementById("speicher" + zaehler).value;
document.getElementById('dynamic_input').innerHTML +=
"<label>" + label + ": <input type='text' name='n_" + feld + "' value='" + inhalt +
"' onInput='speicher(this.value, \"" + feld + "\")'></label><br>";
}
}
}
function feld_minus() {
if (feld >= feldm) {
feld--;
document.getElementById('dynamic_input').innerHTML = "";
for (var zaehler = 1; zaehler <= feld; zaehler++) {
var label = "Feld " + zaehler;
var inhalt = document.getElementById("speicher" + zaehler).value;
document.getElementById('dynamic_input').innerHTML +=
"<label>" + label + ": <input type='text' name='n_" + feld + "' value='" + inhalt +
"' onInput='speicher(this.value, \"" + feld + "\")'></label><br>";
}
}
}
function speicher(inhalt, feld) {
document.getElementById("speicher" + feld).value = inhalt;
}
</script>
Felder hinzufügen <input type="button" value="-" onClick="feld_minus();">
<input type="button" value="+" onClick="feld_plus();">
<div id="dynamic_input"></div>
<!-- Speicher -->
<input type="hidden" id="speicher1">
<input type="hidden" id="speicher2">
<input type="hidden" id="speicher3">
<input type="hidden" id="speicher4">
<input type="hidden" id="speicher5">
<input type="hidden" id="speicher6">
<input type="hidden" id="speicher7">
<input type="hidden" id="speicher8">
<input type="hidden" id="speicher9">
<input type="hidden" id="speicher10">
Mit PHP kann man den gesendeten Feldinhalt (über $_POST) dann so auswerten:
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
for ($zaehler = 1; $zaehler <= 10; $zaehler++) {
if (isset($_POST["n_" . $zaehler])) {
if (!empty($_POST["n_" . $zaehler])) {
echo $_POST["n_" . $zaehler];
}
}
}
}
?>
Siehe auch: JavaScript - Formularfelder dynamisch hinzufügen (2)
Bausteine Alle Anzeigen
Eine zufällige Auswahl von Codeschnipseln
aus den Bereichen
HTML, CSS,
PHP, JavaScript und
MySQL.
<cite> Zitat
CSS - Verwendung von Datenattributen (data-*)
PHP - foreach und list effizient einsetzen