JavaScript - Formularfelder dynamisch hinzufügen

Felder hinzufügen


<script>

// Formularfelder dynamisch hinzufügen

var feld 1;
var 
feldm 1;

function 
feld_plus() {
 if (
feld <= 10) {
  var 
inhalt "Feld " feld;
  
document.getElementById('dynamic_input').innerHTML +=
  
"<input type='text' name='n_" feld "' value='" inhalt "'><br>";
  
feld++;
 }
}

function 
feld_minus() {
 if (
feld feldm) {
 
feld--;
  
document.getElementById('dynamic_input').innerHTML "";
  for (var 
zaehler feldmzaehler feldzaehler++) {
    var 
inhalt "Feld " zaehler;
    
document.getElementById('dynamic_input').innerHTML +=
     
"<input type='text' name='n_" zaehler "' value='" +
      
inhalt "'><br>";
  }
 }
}
</
script>

Felder hinzufügen <input type="button" value="-" onClick="feld_minus();">
<
input type="button" value="+" onClick="feld_plus();"> <br><br>

<
div id="dynamic_input"></div>

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])) {
   echo $_POST["n_" . $zaehler];
  }
 }
}
?>

Bausteine

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

CSS - Fehleingaben in Formularen mit CSS hervorheben

PHP - Kalenderwoche

JavaScript - Meldung mit Format

MySQL - Eintrag in der Tabelle löschen