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 j = 0; j < document.getElementById("table").lastChild.getElementsByTagName("input").length; j++) {
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.
<input> Eingabe (Formularelement)
CSS - Animierte Box mit Keyframes