JavaScript - Formularfelder dynamisch hinzufügen (2)

 Ausgabe:


<?php

/*
 Formularfelder dynamisch hinzufügen (2)
*/

if (isset($_POST["absenden"])) {
  echo 
'<pre>';
  
var_dump($_POST);
  echo 
'</pre>';
  exit;
}
?>

<form id="produkt" name="form" method="post">

  <
table id="table">
    <
tr>
      <
td><input type="text" name="position[]value="position"></td>
      <
td><input type="text" name="anzahl[]value="anzahl"></td>
      <
td><input type="text" name="netto[]value="netto"></td>
      <
td ><input type="text" name="zwischensumme[]value="zwischensumme"></td>
      <
td><input type="text" name="mwst[]value="mwst"></td>
      <
td><input type="text" name="brutto[]value="brutto"></td>
    </
tr>
  </
table>

  <
p>
    <
button type="button" id="clone">Weitere Position</button>
  </
p>

  <
p>
    <
button type="submit" name="absenden">Formular senden</button>
  </
p>

</
form>

<
script>
  
document.querySelector("#clone").addEventListener("click", (e) => {

    const 
NewRow document.getElementById("table").lastChild.cloneNode(true);
    
document.getElementById("table").appendChild(NewRow);
    
let i document.getElementById("table").childNodes.length;

    const 
newname = ["position" i"anzahl" i"netto" i"zwischensumme" i"mwst" i"brutto" i];

    for (var 
0document.getElementById("table").lastChild.getElementsByTagName("input").lengthj++) {

      
document.getElementById("table").lastChild.appendChild(document.createElement("input" [i])).setAttribute("name"newname[j] + "[]");
    }
  });
</
script>

Siehe auch: JavaScript - Formularfelder dynamisch hinzufügen

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<br> Zeilenumbruch

CSS - Transparenter Farbverlauf

PHP - Copyright-Hinweis immer aktuell

JavaScript - Zahlen aus zwei Eingabefeldern zusammenzählen

MySQL - Mit mehreren Begriffen gleichzeitig suchen

Apostroph´s Webseite
Verwenden Sie keine Apostrophen (Auslassungszeichen) in Ihrem Homepage-Namen.