✔ Formularfelder zu Liste hinzufügen

S

südpol

Erfahrenes Mitglied
Hi,

ich bin etwas eingerostet was javescript angeht :rolleyes: Ich muss gerade ein paar kleine Funktionen ändern und komme einfach nicht weiter - auch suchen hat bis jetzt nicht das richtige zu Tage gefördert.

Ich habe eine unsortierte Liste mit zwei Ebenen - Auf beiden Ebenen befinden sich input Felder welche dynamisch erweiterbar sein sollen. Mein Testcode sieht so aus:
HTML: 
<html>
 <head>
   <title>Clone elements</title>
	<script language="JavaScript">
		function AddNewL1(button, objid)
		{
			var clone_me = document.getElementById(objid).firstChild.cloneNode(true);
			//var clone_me = clone_me.replace(/XXX/g, L1_count++);
			
			button.parentNode.appendChild(clone_me);
			
		}
		
		function AddNewL2(button, objid, L1_Element)
		{
			var clone_me = document.getElementById(objid).firstChild.cloneNode(true);
			//var clone_me = clone_me.replace(/XXX/g, L1_Element); 

			button.parentNode.appendChild(clone_me);
		}
		
		var L1_count = 2;
     </script>
  </head>
  <body>
  
    <ul>
		<li class="l1">Level 01: <input type="text" name="l1[]"><button onclick="AddNewL1(this, 'dolly_l1');">+</button>
			<ul>
				<li id="1.1">Level 02  <input type="text" name="l2_1[]" /><button onclick="AddNewL2(this, 'dolly_l2', '0');">+</button></li>
				<li id="1.2">Level 02  <input type="text" name="l2_1[]" /><button onclick="AddNewL2(this, 'dolly_l2', '0');">+</button></li>
			</ul>
		</li>
		<li class="l1">Level 01: <input type="text" name="l1[]"><button onclick="AddNewL1(this, 'dolly_l1');">+</button>
			<ul>
				<li id="1.1">Level 02  <input type="text" name="l2_1[]" /><button onclick="AddNewL2(this, 'dolly_l2', '1');">+</button></li>
				<li id="1.1">Level 02  <input type="text" name="l2_1[]" /><button onclick="AddNewL2(this, 'dolly_l2', '1');">+</button></li>
				<li id="1.1">Level 02  <input type="text" name="l2_1[]" /><button onclick="AddNewL2(this, 'dolly_l2', '1');">+</button></li>
			</ul>
		</li>
	</ul>

		
	<div id="dolly_l1" style="visibility:hidden; display:none"><li class="l1">Level 01: <input type="text" name="l1[]"><button onclick="AddNewL1(this, 'dolly_l1');">+</button>
			<ul>
				<li id="1.1">Level 02  <input type="text" name="l2_XXX[]" /><button onclick="AddNewL2(this, 'dolly_l2', 'XXX');">+</button></li>
			</ul>
		</li>
	</div>
	
	<div id="dolly_l2" style="visibility:hidden; display:none"><li class="l2">Level 02 <input type="text" name="l2_XXX[]" /><button onclick="AddNewL2(this, 'dolly_l2', 'XXX');">+</button></li>
	</div>
	</body>
</html>

Aus dem Testcode ergibt sich für mich jetzt ein Problem:
Ich muss einen string in den zu clonenden Felder entsprechend der Position anpassen. Ich habe eine replace Funktion in JS gefunden - diese funktioniert bei mir jedoch ohne Fehlermeldung nicht (daher auskommentiert).

Bin für jede Hilfe Dankbar!
 
Zuletzt bearbeitet:
Hi,

hmm habe ich mein Problem zu umständlich beschrieben oder ist die Lösung des Problems so komplex? Gibt es vielleicht einen anderen Weg um das besser / richtiger zu machen?
 
Hi,

so Problem gelöst. Ich habe die Funktionen so umgeschrieben, dass der Code nicht geclont wird sondern direkt in der Funktion erstellt wird:

Code: 
function AddNewL2(button, objid, L1_Element)
		{
			var newLI = document.createElement("li");
			newLI.innerHTML = "<input type=\"text\" name=\"l2_"+L1_Element+"[]\" /><button onclick=\"AddNewL2(this, \'dolly_l2\', \'"+L1_Element+"\');\">+</button><button onclick=\"RemoveThis(this);\">-</button>";
	
			button.parentNode.parentNode.appendChild(newLI);
		}

Damit konnte ich die Variablen jetzt auch direkt verwenden. Nicht ganz so generisch wie ich es gerne gehabt hätte - aber OK :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück