[GELÖST] Formularfelder dynamisch duplizieren und löschen

Lord_Chrisi · 22. Juni 2015

Hallo Leute,
normalerweise finde ich den Suchergebnissen immer die passende Antwort. Diesmal jedoch hab ich‘s alleine nicht hingebracht.
Ich benötige für einen Bericht eine duplizier und Löschfunktion von mehreren input Feldern.

Zu Beginn ist nur eine Zeile mit ihren 9 input Feldern zu sehen. Ein Klick auf Zeile einfügen Soll automatisch eine zweite LEERE Zeile erscheinen lassen.
Mit Zeile kopieren werden die in dieser Zeile eingetragenen Werte ans Ende der Tabelle als neue Zeile eingefügt.
Und mit Zeile löschen soll die gesamte Zeile mit allen Input Feldern gelöscht werden.
Ich weiß, dass das mit JavaScript und / oder AJAX „einfach“ zu lösen ist. Leider bin ich nur in PHP fit. Mit JS oder AJAX hab ich noch nie was gemacht.
Hat jemand ev. schon so etwas programmiert oder kann mir jemand dabei helfen?
Das Auswerten der Formularfelder und die DB speichern ist kein Problem. Das bekomm ich hin.

Danke für Eure Hilfe!
Gruß Chris

paul schmitz · 22. Juni 2015

Du könntest zum einfachen dranfügen einer leeren Zeile document.getElementById('ID der Tabelle').innerHTML+="<tr><td>...</td></tr>"; nehmen.
Zum Löschen schlage ich folgendes vor:
Gib jeder Zelle eine Id, die aus Spaltennummer und Zeilennummer besteht

HTML:

<table>
<tr>
<td id="00"></td>
<td id="01"></td>
</tr>
<tr>
<td id="10"></td>
<td id="11"></td>
</tr>
</table>

Die Funktion loeschezeile() geht dann alle Felder durch, die mit der zeilennr anfangen und setzt den Inhalt auf "".

HTML:

<script>
function loeschezeile (zeilennr){
  for(var i=0;i<BREITE;i++){
    document.getElementById(zeilennr+""+i).innerHTML="";
  }
}
</script>

Zum Kopieren geht es genauso, nur muss der Funktion kopierezeile() noch zusätzlich die Zeilennummer der zu kopierenden Zeile übergeben werden und dann der Wert daraus in document.getElementById(zeilennr+""+i).innerHTML="WERT" geschrieben werden.

Alles nur Ansätze und nicht getestet, sollte aber so oder so ähnlich funktionieren

kkapsner · 23. Juni 2015

@paul: das funktioniert nicht. Wenn du innerHTML etwas zuweist werden alle Eingaben, die der Nutzer gemacht hat, gelöscht. Das ist sicherlich nicht gewollt.
Auch ist das Löschen der Zeile, indem man die <td>s leert nicht besonders elegant und kann auch zu ungewollten Darstellungsproblemen führen.

Um das Problem zu lösen muss man mit dem DOM-Methoden arbeiten. In etwa so:

Code:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css"></style>
</head>
<body>
<table>
	<tr id="template"><td><input name="name1[]"> ... <input name="nameN[]"></td><tr>
</table>

<script type="text/javascript">
(function(){
	var template = document.getElementById("template");
	template.id = "";
	var table = template.parentNode;
	table.removeChild(template);
	var addRow = document.createElement("tr");
	var addCell = document.createElement("td");
	addCell.colSpan = template.childNodes.length + 1;
	addRow.appendChild(addCell);
	addButton = document.createElement("button");
	addButton.innerHTML = "+";
	addButton.addEventListener("click", function(){
		var newRow = template.cloneNode(true);
		var deleteCell = document.createElement("td");
		newRow.appendChild(deleteCell);
		var deleteButton = document.createElement("button");
		deleteButton.innerHTML = "−";
		deleteButton.addEventListener("click", function(){
			table.removeChild(newRow);
		}, false);
		deleteCell.appendChild(deleteButton);
		table.insertBefore(newRow, addRow);
	}, false);
	addCell.appendChild(addButton);
	table.appendChild(addRow);
}());</script>
</body>
</html>

- das "Zeile kopieren" ist etwas komplizierter, aber auch machbar.

Lord_Chrisi · 24. Juni 2015

Danke für eure Antworten, das mit dem kopieren mit innerHTML erzeugt zwar neue Felder, jedoch werden die Inhalte aller vorhergehenden leider gelöscht.

@kkapsner

Danke, dein Beispiel funktioniert schon mal ganz gut.

Ist es möglich die erste Reihe der Tabelle auch schon zu Beginn anzuzeigen? Ohne erst auf das + klicken zu müssen.
Kann ich den erzeugten Buttons + und - Klassen zuweisen um Sie mit CSS anzusprechen?

Vielen Dank soweit schon mal, hat mir schon immens geholfen!

mikdoe · 24. Juni 2015

Wenn du den Code für den Eventlistener erst einer Variable zuordnest, z.B. mit var code = function() {...} kannst du damit das addButton.addEventListener bespeisen mit addButton.addEventListener("click", function(){code()}); und gleichzeitig beim Erstaufruf des Scripts den Code ausführen lassen mit der Zeile code().

Lord_Chrisi · 24. Juni 2015

mikdoe schrieb:
Wenn du den Code für den Eventlistener erst einer Variable zuordnest, z.B. mit var code = function() {...} kannst du damit das addButton.addEventListener bespeisen mit addButton.addEventListener("click", function(){code()}); und gleichzeitig beim Erstaufruf des Scripts den Code ausführen lassen mit der Zeile code().

Danke werd ich ausprobieren.

Ich hab aber ein Problem mit dem auslesen der input Felder. Felder die ich über das + zeichen generiere kann ich nicht mit PHP via $_POST auslesen.
Füge ich oberhalb das input Feld mit dem selben Code ein, kann den Inhalt auslesen. Muss ich diese generierten Felder irgendwie besonders auslesen?

Hier mal mein Code:

PHP:

<form class="form-horizontal" role="form" action="#" method="post">



<?php

if (isset($_POST["form_naht_nr_od_pruefbereich"])) {

	$felder = $_POST['form_naht_nr_od_pruefbereich'];
	  
	//alle Daten ausgeben / verarbeiten
	foreach ($felder as $value) {
	  echo "the value is: $value<br />";
	}


} else {
	echo "____\$_POST['form_naht_nr_od_pruefbereich'] ist nicht gesetzt!";
	
}


?>

<div class="tab-pane" id="tab_1">
	<div class="portlet light">
	<div class="portlet-title">
		<div class="caption">
			<i class="fa fa-cogs font-green-sharp"></i>
			<?php if ($form_gesendet == false && empty($pruefberichtsnummer) ) { echo "<span class = \"caption-subject font-green-sharp bold uppercase\">NEUEN MT Bericht erstellen</span>";}?>		
			<?php if ($form_gesendet == true  ) { echo "<span class = \"caption-subject font-green-sharp bold uppercase\">Bericht <span class = 'underlined_text'>$pruefberichtsnummer</span> bearbeiten</span>";}?>		
		</div>
	
		<div class="tools"> <a href="javascript:;" class="collapse"> </a> </div>
	</div>
	<div class="portlet-body form">
		
		<div class="row">						
			<div class="col-md-3">
				<div class="form-group">
					<?php if (empty($_POST["form_eingaben_speichern"])) { echo " <input type = \"hidden\" name = \"form_erstmals_abgesendet\" value = \"sent\" /> "; } ?>
					<input name = "form_eingaben_speichern" class="btn btn-info" type="submit" value="Eingaben speichern" />
				</div>
			</div>
		</div>
		

		
		
<table class="flip-content table table-striped table-bordered table-hover" >

	<thead>
	<tr>	

		<th class = <?php echo COLOR_HEADING_BERICHT; ?>>Naht-Nr. od. Prüfbereich</th>
		<th class = <?php echo COLOR_HEADING_BERICHT; ?>>Abmessungen</th>
		<th class = <?php echo COLOR_HEADING_BERICHT; ?>>Wanddicke in mm</th>
		<th class = <?php echo COLOR_HEADING_BERICHT; ?>>Schweißer Nr.</th>
		<th class = <?php echo COLOR_HEADING_BERICHT; ?>>Abstand<br /> vom<br />Bezugspkt.</th>
		<th class = <?php echo COLOR_HEADING_BERICHT; ?>>Anzeigen<br />-lage</th>
		<th class = <?php echo COLOR_HEADING_BERICHT; ?>>Anzeigen<br />-art</th>
		<th class = <?php echo COLOR_HEADING_BERICHT; ?>>erfüllt</th>
		<th class = <?php echo COLOR_HEADING_BERICHT; ?>>nicht<br />erfüllt</th>
	
	</thead>
	
	<tbody>
		<tr id="template">	
					
					<td><input  name = "form_naht_nr_od_pruefbereich[]" type="text" class="form-control input-sm" placeholder=""/></td>


		</tr>
	</tbody>
	
	
</table>

<input name = "form_eingaben_speichern" class="btn btn-info" type="submit" value="Eingaben speichern" />


</form>


		
</div>
</div>


<script type="text/javascript">
(function(){
	var template = document.getElementById("template");
	template.id = "";
	var table = template.parentNode;
	table.removeChild(template);
	var addRow = document.createElement("tr");
	var addCell = document.createElement("td");
	addCell.colSpan = template.childNodes.length + 1;
	addRow.appendChild(addCell);
	addButton = document.createElement("button");
	addButton.innerHTML = "+";
	addButton.addEventListener("click", function(){
		var newRow = template.cloneNode(true);
		var deleteCell = document.createElement("td");
		newRow.appendChild(deleteCell);
		var deleteButton = document.createElement("button");
		deleteButton.innerHTML = "−";
		deleteButton.addEventListener("click", function(){
			table.removeChild(newRow);
		}, false);
		deleteCell.appendChild(deleteButton);
		table.insertBefore(newRow, addRow);
	}, false);
	addCell.appendChild(addButton);
	table.appendChild(addRow);
}());</script>

Lord_Chrisi · 24. Juni 2015

Ich habe vor ein paar Stunden einen Beitrag gepostet, in dem ich meinen Code eingefügt habe.
Dieser wurde aber nicht sofort angezeigt, es hieß der Beitrag muss erst noch von einem Moderator freigeschalten werden.

Kann diesen bitte jemand freischalten?

Habe Probleme beim Auslesen der per JS erzeugten Formularfelder.
Sie werden beim submit nicht mitgesendet.

mikdoe · 25. Juni 2015

*Nr. 6 freigeschaltet*

Ich bin heute zeitlich etwas knapp, vielleicht schaffe ich es heute Abend oder jemand ist schneller.

kkapsner · 26. Juni 2015

Lord_Chrisi schrieb:
Kann ich den erzeugten Buttons + und - Klassen zuweisen um Sie mit CSS anzusprechen?

Klar.

Lord_Chrisi schrieb:
Muss ich diese generierten Felder irgendwie besonders auslesen?

Eigentlich nicht - ich hab' keine Probleme damit. Welchen Browser verwendest du?

Ich hab' aber gerade gemerkt, dass ich vergessen habe, den <button> einen Typ zu geben. Wenn man das nicht macht, wird der Standardwert "submit" verwendet, was beim Klicken das <form> absendet.

Hab' mal die ganzen Sachen eingebaut:

Code:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
button.plus {
	color: green;
}
button.minus {
	color: red;
}
#template {
	display: none;
}
</style>
</head>
<body>
<form method="POST" action="/server/dataEcho.php">
	<table>
		<tr id="template"><td><input name="name1[]"> ... <input name="nameN[]"></td><tr>
	</table>
	<button>senden</button>
</form>

<script type="text/javascript">
(function(){
	var template = document.getElementById("template");
	template.id = "";
	var table = template.parentNode;
	table.removeChild(template);
	function appendRow(){
		var newRow = template.cloneNode(true);
		var deleteCell = document.createElement("td");
		newRow.appendChild(deleteCell);
		var deleteButton = document.createElement("button");
		deleteButton.type = "button";
		deleteButton.className = "minus";
		deleteButton.innerHTML = "−";
		deleteButton.addEventListener("click", function(){
			table.removeChild(newRow);
		}, false);
		deleteCell.appendChild(deleteButton);
		table.insertBefore(newRow, addRow);
	}
	
	var addRow = document.createElement("tr");
	var addCell = document.createElement("td");
	addCell.colSpan = template.childNodes.length + 1;
	addRow.appendChild(addCell);
	addButton = document.createElement("button");
	addButton.type = "button";
	addButton.className = "plus";
	addButton.innerHTML = "+";
	addButton.addEventListener("click", appendRow, false);
	addCell.appendChild(addButton);
	table.appendChild(addRow);
	appendRow();
}());</script>
</body>
</html>

Lord_Chrisi · 26. Juni 2015

Vielen Dank kkapsner.

Jetzt funktioniert es!

Ich mach mich jetzt mal ans auswerten und speichern der Eingaben.

Angenommen ich habe insgesamt 5 Zeilen mit dem + button erzeugt.
Wenn ich das Formular absende lese ich alle 5 Zeilen aus und gebe Sie danach wieder mit den Eingaben aus. Die Werte sind in der DB gespeichert

Jetzt sieht der Nutzter das Formular mit 5 vorausgefüllten Zeilen und kann weitere einfügen. Wie bekomme ich den - Button auf die 5 bestehenden
Zeilen, damit diese ebenfalls wieder gelöscht werden können und nicht nur neu erstellte?

Danke für eure Unterstützung

kkapsner · 28. Juni 2015

Das ist auch nicht besonders schwer. Du musst den Code mit dem deleteButton einfach auch für jede schon existierende Zeile ausführen:

Code:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
button.plus {
	color: green;
}
button.minus {
	color: red;
}
#template {
	display: none;
}
</style>
</head>
<body>
<form method="POST" action="/server/dataEcho.php">
	<table>
		<tr><td><input name="name1[]"> ... <input name="nameN[]"></td></tr>
		<tr><td><input name="name1[]"> ... <input name="nameN[]"></td></tr>
		<tr id="template"><td><input name="name1[]"> ... <input name="nameN[]"></td></tr>
	</table>
	<button>senden</button>
</form>

<script type="text/javascript">
(function(){
	var template = document.getElementById("template");
	template.id = "";
	var table = template.parentNode;
	table.removeChild(template);
	function addDeleteButton(row){
		var deleteCell = document.createElement("td");
		row.appendChild(deleteCell);
		var deleteButton = document.createElement("button");
		deleteButton.type = "button";
		deleteButton.className = "minus";
		deleteButton.innerHTML = "−";
		deleteButton.addEventListener("click", function(){
			table.removeChild(row);
		}, false);
		deleteCell.appendChild(deleteButton);
	}
	[].slice.call(table.rows).forEach(addDeleteButton);
	function appendRow(){
		var newRow = template.cloneNode(true);
		addDeleteButton(newRow);
		table.insertBefore(newRow, addRow);
	}
	
	var addRow = document.createElement("tr");
	var addCell = document.createElement("td");
	addCell.colSpan = template.childNodes.length + 1;
	addRow.appendChild(addCell);
	addButton = document.createElement("button");
	addButton.type = "button";
	addButton.className = "plus";
	addButton.innerHTML = "+";
	addButton.addEventListener("click", appendRow, false);
	addCell.appendChild(addButton);
	table.appendChild(addRow);
	appendRow();
	
}());</script>
</body>
</html>

PS: Hab' gerade gesehen, dass mein HTML oben nicht valide ist... anstatt "</tr>" hab' ich "<tr>" geschrieben... tztztz

Lord_Chrisi · 28. Juni 2015

Danke funktioniert perfekt jetzt.
Wie würde das mit dem Zeile duplizieren aussehen?

Jetzt hab ich eine generelle Frage:

Die Input Felder werden ja auch wenn sie leer sind ins array übergeben.
Als wenn von 7 Werten 3 leer sind weis ich trotzdem dass es insgesamt 7 waren und ich weiß genau welche davon leer sind.

Die letzte 2 Spalten je Zeile sind 2 radio buttons. Die sollen je Zeile zusammengehören.
Jedoch wenn von den 2 Radio Buttons keiner ausgewählt wurde dann wird dieser ja auch nicht übermittelt.

Wenn wieder von 7 Werten 3 leer sind erhalte ich diesmal im Gegensatz zu Input Feldern nur 4 Werte statt 7.
Dies Werte kann ich dann aber nicht mehr zuweisen, da ich ja nicht mehr weiß wo sie hingehören.

Hab bis dato keinen vernüftigen Lösungsansatz gefunden.
Hat jemand eine Idee dazu

Hab schon gesehen, nach dem Projekt mach ich einen JS Kurs

Vielen Dank!

kkapsner · 28. Juni 2015

Lord_Chrisi schrieb:
Wie würde das mit dem Zeile duplizieren aussehen?

Anstatt der Templatzeile musst du da einfach die geklickte Reihe duplizieren und nicht am Ende anfügen, sondern nach der Zeile. ABER das Problem ist hierbei, dass die dynamisch erzeugten Eventlistener für die <button>s nicht geklont werden (wären eigentlich auch falsch...). Deswegen müssen die Buttons neu erstellt werden.

Code:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
button.plus {
	color: green;
}
button.minus {
	color: red;
}
#template {
	display: none;
}
</style>
</head>
<body>
<form method="POST" action="/server/dataEcho.php">
	<table>
		<tr><td><input name="name1[]"> ... <input name="nameN[]"></td></tr>
		<tr><td><input name="name1[]"> ... <input name="nameN[]"></td></tr>
		<tr id="template"><td><input name="name1[]"> ... <input name="nameN[]"></td></tr>
	</table>
	<button>senden</button>
</form>

<script type="text/javascript">
(function(){
	var template = document.getElementById("template");
	template.id = "";
	var table = template.parentNode;
	table.removeChild(template);
	function addButtons(row){
		addDeleteButton(row);
		addCopyButton(row);
	}
	function removeButtons(row){
		[].slice.call(row.querySelectorAll("button.dynamic")).forEach(function(button){
			row.removeChild(button.parentNode);
		});
	}
	function addDeleteButton(row){
		var deleteCell = document.createElement("td");
		row.appendChild(deleteCell);
		var deleteButton = document.createElement("button");
		deleteButton.type = "button";
		deleteButton.className = "dynamic minus";
		deleteButton.innerHTML = "−";
		deleteButton.addEventListener("click", function(){
			table.removeChild(row);
		}, false);
		deleteCell.appendChild(deleteButton);
	}
	function addCopyButton(row){
		var copyCell = document.createElement("td");
		row.appendChild(copyCell);
		var copyButton = document.createElement("button");
		copyButton.type = "button";
		copyButton.className = "dynamic copy";
		copyButton.innerHTML = "copy";
		copyButton.addEventListener("click", function(){
			var copy = row.cloneNode(true);
			removeButtons(copy);
			addButtons(copy);
			table.insertBefore(copy, row.nextSibling);
		}, false);
		copyCell.appendChild(copyButton);
	}
	[].slice.call(table.rows).forEach(addButtons);
	function appendRow(){
		var newRow = template.cloneNode(true);
		addButtons(newRow);
		table.insertBefore(newRow, addRow);
	}
	
	var addRow = document.createElement("tr");
	var addCell = document.createElement("td");
	addCell.colSpan = template.childNodes.length + 1;
	addRow.appendChild(addCell);
	addButton = document.createElement("button");
	addButton.type = "button";
	addButton.className = "plus";
	addButton.innerHTML = "+";
	addButton.addEventListener("click", appendRow, false);
	addCell.appendChild(addButton);
	table.appendChild(addRow);
	appendRow();
	
}());</script>
</body>
</html>

Lord_Chrisi schrieb:
Jedoch wenn von den 2 Radio Buttons keiner ausgewählt wurde dann wird dieser ja auch nicht übermittelt.

Füge einen dritten Radiobutton hinzu, der indiziert, dass nichts ausgewählt wurde. Diesen kannst du ja im HTML mittels "checked" vorselektieren. Dadurch hast du immer auch 7 Werte. Bei Radioboxen wäre das Ganze etwas komplizierter.

Lord_Chrisi · 28. Juni 2015

Danke für die schnelle Antwort.
Werd ich nachher gleich testen.

Auf das mit dem 3. Radiobutton hätt ich auch selbst kommen können....

- - - Aktualisiert - - -

hab jetzt ein anderes Problem mit den radio Buttons je Zeile beim kopieren / neu einfügen

Wenn der radio Button kopiert wird, dann bleibt ja der Name gleich.
Somit kann ich wenn ich 5 Zeilen habe, trotzdem nur einen der vielen Buttons auswählen, da diese lt. name ja zusammengehören

HTML:

<td><input checked class = "hidden" name = "form_erfuellt[]" type = "radio" value = "nicht_gesetzt" ></td>
<td><input name = "form_erfuellt[]" type = "radio" value = "erfuellt"/></td>
<td><input name = "form_erfullt[]" type = "radio" "nicht_erfuellt"/></td>

Man müsste jeder Zeile eigentlich einen eindeutigen Wert für die Radio Buttons zuteilen oder?

kkapsner · 29. Juni 2015

Stimmt - daran hatte ich nicht gedacht. Dann müssen wir beim hinzufügen der Zeilen doch an den Namen was ändern.

Code:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
button.plus {
	color: green;
}
button.minus {
	color: red;
}
#template {
	display: none;
}
</style>
</head>
<body>
<form method="POST" action="/server/dataEcho.php">
	<table>
		<tr><td><input name="name1[0]"> ... <input name="nameN[0]"><input type="radio" name="radio[0]"><input type="radio" name="radio[0]"><input type="radio" name="radio[0]"></td></tr>
		<tr><td><input name="name1[1]"> ... <input name="nameN[1]"><input type="radio" name="radio[1]"><input type="radio" name="radio[1]"><input type="radio" name="radio[1]"></td></tr>
		<tr id="template"><td><input name="name1[n]"> ... <input name="nameN[n]"><input type="radio" name="radio[n]"><input type="radio" name="radio[n]"><input type="radio" name="radio[n]"></td></tr>
	</table>
	<button>senden</button>
</form>

<script type="text/javascript">
(function(){
	var template = document.getElementById("template");
	template.id = "";
	var table = template.parentNode;
	table.removeChild(template);
	function addButtons(row){
		addDeleteButton(row);
		addCopyButton(row);
	}
	function removeButtons(row){
		[].slice.call(row.querySelectorAll("button.dynamic")).forEach(function(button){
			row.removeChild(button.parentNode);
		});
	}
	function renameInputs(row, id){
		id = id || Math.random().toString(36).replace(/^0?\./, "");
		while (document.getElementsByName(id).length){
			id += Math.floor(Math.random() * 36).toString(36);
		}
		[].slice.call(row.querySelectorAll("input, select")).forEach(function(input){
			input.name = input.name.replace(/\[(?:\d|\w)+\]/, "[" + id + "]");
		});
	}
	function addDeleteButton(row){
		var deleteCell = document.createElement("td");
		row.appendChild(deleteCell);
		var deleteButton = document.createElement("button");
		deleteButton.type = "button";
		deleteButton.className = "dynamic minus";
		deleteButton.innerHTML = "−";
		deleteButton.addEventListener("click", function(){
			table.removeChild(row);
		}, false);
		deleteCell.appendChild(deleteButton);
	}
	function addCopyButton(row){
		var copyCell = document.createElement("td");
		row.appendChild(copyCell);
		var copyButton = document.createElement("button");
		copyButton.type = "button";
		copyButton.className = "dynamic copy";
		copyButton.innerHTML = "copy";
		copyButton.addEventListener("click", function(){
			insertRow(row, row.nextSibling);
		}, false);
		copyCell.appendChild(copyButton);
	}
	[].slice.call(table.rows).forEach(addButtons);
	
	function insertRow(currentTemplate, nextNode){
		currentTemplate = currentTemplate || template;
		nextNode = nextNode || addRow;
		var copy = currentTemplate.cloneNode(true);
		removeButtons(copy);
		addButtons(copy);
		renameInputs(copy);
		table.insertBefore(copy, nextNode);
	}
	
	var addRow = document.createElement("tr");
	var addCell = document.createElement("td");
	addCell.colSpan = template.childNodes.length + 1;
	addRow.appendChild(addCell);
	addButton = document.createElement("button");
	addButton.type = "button";
	addButton.className = "plus";
	addButton.innerHTML = "+";
	addButton.addEventListener("click", function(){insertRow();}, false);
	addCell.appendChild(addButton);
	table.appendChild(addRow);
	insertRow();
	
}());</script>
</body>
</html>

Dann kannst du dir sogar den dritten Radiobutton sparen.

Lord_Chrisi · 29. Juni 2015

Großartig, danke für deine Hilfe. Haut jetzt alles so hin wie es soll (außer ich hab beim Testen was übersehen

)

kkapsner · 30. Juni 2015

Lord_Chrisi schrieb:
danke für deine Hilfe

Bitte - gern geschehen.

herrsalat · 24. Jan. 2021

Ich weiß, das ist schon ein recht altes Thema, aber da es für mich gerade aktuell ist versuche ich mal ob hier noch jemand antwortet.
erstmal vielen Dank für das tolle script!
Ich habe es ausprobiert und es funktioniert viel besser, als alles vergleichbare, das ich zuvor schon gefunden und nach einigen versuchen wieder verworfen habe.

Ich möchte ein Bestellformular für Bücher schreiben, sowas ähnliches wie einen Warenkorbformular, aber es soll nur intern für die Mitarbeiter in unserer Buchhandlung sein.

Eine Datenbank (hier als Array simuliert) bietet Buchtitel und Preis

ich würde das script jetzt gerne noch weiter ausstatten, mit funktionen, die durch die anzahl der ausgewählten items den gesamtpreis berechen.
ich scheitere aber, da ich die einzelnen Zeilen ja getrennt berechnen muss, und so die ids nicht mehr ansprechen kann, also anzahl[n] oder ladenpreis[n} wird dann von den anderen scripten ja nichtmehr erkannt.
kann mir jemand auf die sprünge helfen, wie ich die berechnen und ladenpreis ensetzten funktionen in das script integrieren kann?

PHP:

<?php
$titel = array("Goethe: Faust" => "12,00", "Umberto Eco: Der Name der Rose" => "16,00", "Albert Camus: Der Fremde"  => "11,99");
?>

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Warenkorb</title>

Code:

<script type="text/javascript">
/* script zum Einfügen des Ladenpreis */
function LadenpreisEintragen(e) {
    document.getElementById("ladenpreis").value = e.target.value
}
</script>
<script type="text/javascript">
/* script zum berechnen des Gesamtpreis */
function berechnen(x,y)
{
	y.value=y.value.replace(",",".");

	var summe= parseInt(x.value) * parseFloat(y.value);
	
	y.value=y.value.replace(".",",");
	document.buchbestellung.GesamtPreis.value= summe;
	document.buchbestellung.GesamtPreis.value=document.buchbestellung.GesamtPreis.value.replace(".",",");
	
	var s=',';
	var l=2;

if (document.buchbestellung.GesamtPreis.value.indexOf(s) == -1) {
    document.buchbestellung.GesamtPreis.value+=s;
}

var temp=document.buchbestellung.GesamtPreis.value.split(s);
for (i=temp[1].length; i<l; i++) {
    document.buchbestellung.GesamtPreis.value+='0';
}	
}
//für nachkomma stellen parseFloat benutzen
</script>

HTML:

</head>
<body>
<form name="buchbestellung">
<table>
	<tr id="template">
		<td> 
			<input type="text" id="anzahl[n]" name="anzahl" value="0" onKeyup="berechnen(anzahl,ladenpreis)">
			<select id="titel[n]" name="titel" onchange="LadenpreisEintragen(event); berechnen(anzahl,ladenpreis)">
				<option value="0,00">bitte auswählen</option>
				<?php
					foreach($titel as $x => $x_value) {
						echo "<option value=" . $x_value .">" . $x . "</option>";
					}
				?>
			</select>
			<input id="ladenpreis[n]" type="text" value="" onKeyup="berechnen(anzahl,ladenpreis)">
			<input type="text" size="5" id="gesamtpreis[n]" name="GesamtPreis" value="">
		</td>
	</tr>
	<table>
<button>bestellen</button>
</form>

Code:

<script type="text/javascript">
(function(){
	var template = document.getElementById("template");
	template.id = "";
	var table = template.parentNode;
	table.removeChild(template);
	function addButtons(row){
		addDeleteButton(row);
		addCopyButton(row);
	}
	function removeButtons(row){
		[].slice.call(row.querySelectorAll("button.dynamic")).forEach(function(button){
			row.removeChild(button.parentNode);
		});
	}
	function renameInputs(row, id){
		id = id || Math.random().toString(36).replace(/^0?\./, "");
		while (document.getElementsByName(id).length){
			id += Math.floor(Math.random() * 36).toString(36);
		}
		[].slice.call(row.querySelectorAll("input, select")).forEach(function(input){
			input.name = input.name.replace(/\[(?:\d|\w)+\]/, "[" + id + "]");
		});
	}
	function addDeleteButton(row){
		var deleteCell = document.createElement("td");
		row.appendChild(deleteCell);
		var deleteButton = document.createElement("button");
		deleteButton.type = "button";
		deleteButton.className = "dynamic minus";
		deleteButton.innerHTML = "−";
		deleteButton.addEventListener("click", function(){
			table.removeChild(row);
		}, false);
		deleteCell.appendChild(deleteButton);
	}
	function addCopyButton(row){
		var copyCell = document.createElement("td");
		row.appendChild(copyCell);
		var copyButton = document.createElement("button");
		copyButton.type = "button";
		copyButton.className = "dynamic copy";
		copyButton.innerHTML = "copy";
		copyButton.addEventListener("click", function(){
			insertRow(row, row.nextSibling);
		}, false);
		copyCell.appendChild(copyButton);
	}
	[].slice.call(table.rows).forEach(addButtons);
	
	function insertRow(currentTemplate, nextNode){
		currentTemplate = currentTemplate || template;
		nextNode = nextNode || addRow;
		var copy = currentTemplate.cloneNode(true);
		removeButtons(copy);
		addButtons(copy);
		renameInputs(copy);
		table.insertBefore(copy, nextNode);
	}
	
	var addRow = document.createElement("tr");
	var addCell = document.createElement("td");
	addCell.colSpan = template.childNodes.length + 1;
	addRow.appendChild(addCell);
	addButton = document.createElement("button");
	addButton.type = "button";
	addButton.className = "plus";
	addButton.innerHTML = "+";
	addButton.addEventListener("click", function(){insertRow();}, false);
	addCell.appendChild(addButton);
	table.appendChild(addRow);
	insertRow();
	
}());</script>

HTML:

</body>
</html>

allerbeste Grüße zum Sonntag abend

[GELÖST] Formularfelder dynamisch duplizieren und löschen

Lord_Chrisi

Guest

Anhänge

paul schmitz

New member

kkapsner

Super Moderator

Lord_Chrisi

Guest

mikdoe

Moderator

Lord_Chrisi

Guest

Lord_Chrisi

Guest

mikdoe

Moderator

kkapsner

Super Moderator

Lord_Chrisi

Guest

kkapsner

Super Moderator

Lord_Chrisi

Guest

kkapsner

Super Moderator

Lord_Chrisi

Guest

kkapsner

Super Moderator

Lord_Chrisi

Guest

kkapsner

Super Moderator

herrsalat

New member