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

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.

<figure> Abbildung

CSS - Verschieben von Hintergründen

PHP - Automatische Verlinkung eines Textes und den Linktext kürzen

JavaScript - Zahlenwerte überprüfen und korrigieren

MySQL - Mindestwert einer Spalte ermitteln

Vorschaubilder
Gerade wenn Sie eine Webseite mit sehr vielen Bildern besitzen, sollten Sie darauf achten, dass Sie jeweils Vorschaubilder anzeigen und nicht die originalen Bilder. In der Regel schauen sich Ihre Besucher nicht alle Bilder an, müssen aber warten, bis alle Bilder geladen sind.