Per Click, mehreres hinten dranhängen

[JSNOOB]

Hallo.

Ich habe ein Formular wo per Klick mehreres hinzukommen soll.

Bei jedem Klick auf <a href='javascript:;' onclick='addNewElement();return false;'>Add</a>
soll folgendes dem  <div id='container'></div>hinzugefügt werden:

<ul>  
<li>  
<a href='#'>link</a>  
<input type='text' name='x[]'/>  
<input type='text' name='y[]'/>  
<textarea name='y[]'></textarea>  
</li>  
</ul>

Wie geht sowas?
Mit createElement wäre das doch viel zu umständlich oder?
Gruß, JSNOOB

[Micha]

Hallo JSNOOB,

Wie geht sowas?

Du könntest innerHTML verwenden. Du speicherst einfach Deine List als Variable ab und fügst sie mit jedem klick dem DIV hinzu.

Mit freundlichem Gruß
Micha

[JSNOOB]

Hi.

Wie geht sowas?
Du könntest innerHTML verwenden. Du speicherst einfach Deine List als Variable ab und fügst sie mit jedem klick dem DIV hinzu.

innerHTMl sorgt aber dafür das bestehende Felder geleert werden.
Das sollen sie natürlich nicht!

[Der Martin]

Hallo,

Du könntest innerHTML verwenden. Du speicherst einfach Deine List als Variable ab und fügst sie mit jedem klick dem DIV hinzu.
innerHTMl sorgt aber dafür das bestehende Felder geleert werden.

nein, nur die, die mit dem Neusetzen von innerHTML ersetzt bzw. neu eingebaut werden. Du wolltest doch nicht das ganze Formular ersetzen, sondern nur ein paar Elemente hinzufügen. Also sorgst du dafür, dass dein Formular ein Dummy-Element enthält (z.B. ein leeres fieldset, das du zunächst mit display:none; ausblendest), und setzt dann dessen innerHTML. Die restlichen Formularfelder drumherum sollte das nicht beeinflussen.

So long,
 Martin

[JSNOOB]

Hehe nette Idee.
allerdings soll man beliebig viele Felder hinzufügen und entfernen können.
Entfernen ist ja kein Problem. Aber hinzufügen ...
Ich kann ja schlecht ein weiteres Dummy einfügen dann sind die anderen wieder beeinflusst. Ich kann auch nich das selbe verwenden dann sind die bisher erstellten darin betroffen...

[Der Martin]

Hallo,

allerdings soll man beliebig viele Felder hinzufügen und entfernen können.

dann musst du wohl doch den umständlichen Weg über DOM-Manipulation gehen.

So long,
 Martin

[Deus Figendi]

Wie geht sowas?
Mit createElement wäre das doch viel zu umständlich oder?

Warum?

  
function addNewElement() {  
	var new_ul = document.createElement("ul");  
	var new_li = document.createElement("li");  
	var new_a = document.createElement("a");  
	new_a.href = "#";  
	new_a.appendChild(document.CreateTextNode("link");  
	var new_inputX = document.createElement("input");  
	new_inputX.type = "text";  
	new_inputX.name = "x[]";  
	var new_inputY = document.createElement("input");  
	new_inputY.type = "text";  
	new_inputY.name = "y[]";  
	var new_textarea = document.createElement("textarea");  
	new_textarea.name = "y[]"; //sicher?  
	  
	new_li.appendChild(new_a);  
	new_li.appendChild(new_inputX);  
	new_li.appendChild(new_inputY);  
	new_li.appendChild(new_textarea);  
	  
	new_ul.appendChild(new_li);  
	  
	document.getElementById("container").appendChild(new_ul);	  
}  

Da, C&P-fertig und hat auch nicht lange gedauert.

[JSNOOB]

Danke dir aber es ist in wirklichkeit etwas komplizierter:

var anzElem=1;

<li>Medium  
<span id='s"+anzElem+"'>"+anzElem+"</span>  
<a href='"+anzElem+"' onclick='delElem(this.href);return false;' title='Medium "+anzElem+" löschen'id='del_medium_"+anzElem+"'>Delete</a></li>  
	  
<li style='float:left'>  
<span class='b_table_left'></span><span class='b_table_left'>Titel:</span><input type='text' name='op_name[]' class='b_thread_medium_title'/><br/><span class='b_table_left'>URL:</span><input type='text' name='op_url[]' class='b_thread_medium_url' /></li>  
		<li style='float:left;width:140px'>Kurzbeschreibung:<br/>  
		<span id='txtcounter_"+anzElem+"'>160</span> Zeichen &uuml;brig<li>  
		<li style='margin-left:5px'>  
		<textarea name='op_desc[]' value='#dwwqd' style='width:300px' onkeyup='txtcounter("+anzElem+");' onfocus='txtcounter("+anzElem+");' onblur='txtcounter("+anzElem+");' id='op_desc_"+anzElem+"' value=''></textarea>  
		</li></ul>

Und das ist einfach viel zu viel als das man das so wie dus gemacht hast formuliert denke ich. Gibts da keine Möglichkeit das einfach dranzuhängen?

[JSNOOB]

Und wie bekomme ich das ganze XHTML Strict gerecht das er </br> statt nur <br> erstellt`?

[JSNOOB]

Gut ich habs per DOM Manipulation gemacht.

Allerdings habe ich ein neues Problem. Ich möchte dem created Element ein onclick event geben.

Das geht abe rnicht:

var new_a=document.createElement("a");
new_a.onclick="del_Elem(this.href)";

das geht nicht. warum?

[Kai345]

[latex]Mae  govannen![/latex]

var new_a=document.createElement("a");
new_a.onclick="del_Elem(this.href)";

das geht nicht. warum?

http://molily.de/js/einbindung.html#fehler-code-als-string

Cü,

Kai