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 1zaehler <= feldzaehler++) {
   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 1zaehler <= feldzaehler++) {
   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(inhaltfeld) {
 
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 Feldinhalt 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];
   }
  }
 }
}
?>

Bausteine

Eine zufällige Auswahl von „Bausteinen” (Snippets) aus den Bereichen CSS, PHP, JavaScript und MySQL.

CSS - Wertigkeiten verändern mit der !important-Regel

PHP - Einbinden aller Dateien aus einem Verzeichnis

JavaScript - Letzte Änderung an einem Dokument ausgeben

MySQL - Doppelte Einträge in der Tabelle finden