✔ Formular dynamisch erweitern (reloaded)

[dasIcebaer]

Formular dynamisch erweitern (reloaded) - Zugriff auf style-Attribut

Hallo, allerseits!

Ich stecke (wieder mal) beim Problem, das ich ein Formular um Felder erweitern will. Das Formular sieht etwa so aus:

<form action="script.php" method="post">
<fieldset>
[...]
</fieldset>

<fieldset>
<ol>
<li><input type="text" name="data[]" value="" />
<button value="(+)" onclick="clone_this(this)" /></li>
<li><input type="text" name="data[]" value="" />
<button value="(+)" onclick="clone_this(this)" /></li>
<li><input type="text" name="data[]" value="" />
<button value="(+)" onclick="clone_this(this)" /></li>
</ol>
</fieldset>

<fieldset>
[...]
</fieldset>
</form>

Ein form.appendChild klappt also nicht einfach so. Ich habe dann dieses Posting gefunden und versucht umzusetzen, was aber nicht funktioniert hat - <input type="button"...> wird bei mir nicht korrekt als button erkannt und auch so hat es nicht geklappt.

Soweit ich den Code verstanden habe, sollte es eigentlich funktionieren, da die nächste parentNode <li> ist. Tuts nur leider nicht... Ich habe mir die Selfhtml-JavaScript-Sektion zum Thema Nodes angetan, schaffe es aber nicht mal, einen einfachen div mit eigene ID per Javascript zu klonen.

Kann mir jemand helfen? Danke im Voraus!

--------------------

Lösung siehe unten, Problemerweiterung ebenso

 

[Quaese]

Hi,

versuch es mal mit folgender Funktion:

function clone_this(objBtn){
  var objClone = objBtn.parentNode.cloneNode(true);
  objBtn.parentNode.parentNode.appendChild(objClone);
}

Und der zugehörigen HTML-Passage:

<ol>
<li><input type="text" name="data[]" value="" />
<button value="(+)" onclick="clone_this(this)">clone_this</button></li>
</ol>

Vielleicht hilft dir das weiter.

Ciao
Quaese

 

[dasIcebaer]

Klasse, das funktioniert schonmal!

Jetzt müsste ich noch die Werte der neuen Node löschen können und (evtl.) noch einen "(-)"-Button dahinter legen können...

Klappen tut das mit folgendem Code:

function clone_this(objBtn){
	  var objClone = objBtn.parentNode.cloneNode(true);
	  objBtn.parentNode.parentNode.appendChild(objClone);
	  objBtn.parentNode.parentNode.lastChild.childNodes[0].value='';
	  objBtn.value="(-)";
	  objBtn.onclick=new Function('myRemove', 'this.parentNode.parentNode.removeChild(this.parentNode)');
	}

Nach dem Klonen wird der Inhalt der ersten Childnode des <li>-blocks auf leer gesetzt und der Button des aktuellen Objekts zu einem "remove" umkodiert (durch Zuweisung einer neuen Funktion).

Was ich jetzt noch suche, ist ein Weg, auf ein "style"-Attribut eines inputs zuzugreifen. objBtn.style ist kein korrektes Attribut (wie ich zuerst ob dem "value"-Attribut dachte).

Gibts da noch Ideen zu?

 

[Quaese]

Hi,

über das style-Objekt und die entsprechenden Eigenschaften (siehe hier), sollte der Stil des Buttons angepasst werden können.

Beispiel - Textfarbe ändern:

objBtn.style.color = "#f00";

Ciao
Quaese

 

[dasIcebaer]

Spitze, so hats funktioniert! Hatte probiert den stylestring zu setzen (objBtn.style = "background-color:#f00"). Vielen Dank für die Hilfen!