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 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];
   }
  }
 }
}
?>

Bausteine

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

CSS - Transparenter Farbverlauf

PHP - Grafiken mit PHP rotieren

JavaScript - Schieberegler für Bilder

MySQL - Datensatz Wert um 10% veringern