Matthis: Problem mit duplizieren eines <div> per JavaScript

Beitrag lesen

Moin moin,

ich will per JavaScript <div> duplizieren. In diesem <div> habe ich 4 Radiobuttons die in 3 Fällen onClick ein <input type="text"> erstellen. Im 4. Fall eine <textarea>.  Klicke ich nun auf den 4. (der eine textarea erstellt) und dupliziere dieses <div>, kann ich im duplikat das Eingabefeld nicht mehr verändern. D.h. klicke ich auf den 1. Radiobutton der ein <input type="text"> zur Folge hätte, wird das Eingabefeld nicht geändert. Was mache ich falsch ?

---Mein div---

  
<div class="middle" style="background-image: url(img/middle.jpg);">  
    <div id="rootForm" class="middleleft">  
  
	<input type="hidden" value="Entfernen"		onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />  
        <br /><br />  
  
        <span>Welchen Filtertyp möchten Sie verwenden?</span><br />  
	<input type="radio" id="sender" name="rule" value="SENDER"  
title="Absender" onclick="getInput(this)" checked="checked" />Absender  
        <br />  
  
        <input type="radio" id="subject" name="rule" value="SUBJECT"  
title="Betreff" onclick="getInput(this)" />Betreff  
        <br />  
  
	<input type="radio" id="date" name="rule" value="DATE" title="Datum"  
onclick="getInput(this)" />Datum  
        <br /> 		  
  
	<input type="radio" id="content" name="rule" value="CONTENT" title="Inhalt" onclick="getInput(this)" />Inhalt  
        <br /><br />  
					  
	<span title="Der Filterwert"> Wert: </span><br />  
	<input type="text" id="ruleValue" name="ruleValue" />  
	<input type="hidden" id="dateValue" name="ruleSecondValue" />  
        <br />  
  
    </div>  
    <span id="writeForm"></span>  
  
</div>  

---Buttons die das duplizieren auslösen---

  
<div class="middle" style="background-image: url(img/middle.jpg);">  
   <br />  
   <div class="middleleft">  
	<input type="button" name="addAnd"  
title="Fügt eine &&-Verknüpfung hinzu" value="&&" onclick="addForm()"/>  
  
        <input type="button" name="addOr" title="Fügt eine ||-Verknüpfung hinzu" value="||" onclick="addForm()" />  
  
        <input type="hidden" name="linkValue" value="">  
    </div>  
    <br />  
</div>  

---JS-Funktion die das neue div anfügen---

  
function addForm() {  
	counter++;  
	var newFields = document.getElementById('rootForm').cloneNode(true);  
	newFields.id = 'newForm' + counter;  
	newFields.style.display = 'block';  
	var newField = newFields.childNodes;  
	for ( var i = 0; i < newField.length; i++) {  
		var field = newField[i];  
		if (field.nodeType == 1 && field.nodeName == 'INPUT') {  
			if (field.value == 'Entfernen') {  
				field.type = 'button';  
			}  
			field.name = field.name + "[" + counter + "]";  
			field.id = field.id + '_' + counter;  
	        } else if (field.nodeType == 1 && field.nodeName == 'textarea') {  
			field.name = field.name + "[" + counter + "]";  
			field.id = field.id + "[" + counter + "]";  
		}  
	}  
	var insert = document.getElementById('writeForm');  
	insert.parentNode.insertBefore(newFields, insert);  
}  

---JS-Funktion die entscheided welches 'Inputfeld' angezeigt werden soll---

  
  
function getInput(box) {  
	var id = box.id;  
	var typ = box.title;  
	setInput(typ, id);  
}  
  
function setInput(typ, id) {  
	var dateBox = 'dateValue';  
	var valueBox = 'ruleValue';  
	var textarea = 'textarea';  
	if (id.lastIndexOf('_') != -1) {  
        	dateBox += id.substring(id.lastIndexOf('_'));  
		valueBox += id.substring(id.lastIndexOf('_'));  
		textarea += id.substring(id.lastIndexOf('_'));  
	}  
  
	if (typ != 'Inhalt' && typ != 'Datum') {  
	        if (document.getElementById(dateBox).type == 'text') {  
			document.getElementById(dateBox).type = 'hidden';  
		}  
		if (document.getElementById(textarea) != null) {  
			var oldEl = document.getElementById(textarea);  
			var newEl = document.createElement('input');  
  
			newEl.setAttribute('type', 'text');  
        		newEl.setAttribute('id', valueBox);  
  
			oldEl.parentNode.replaceChild(newEl, oldEl);  
  
		} else {  
  
			document.getElementById(valueBox).type = 'text';  
		}  
  
	} else if (typ == 'Datum') {  
  
		if (document.getElementById(textarea) != null) {  
  
			var oldEl = document.getElementById(textarea);  
			var newEl = document.createElement('input');  
			newEl.setAttribute('type', 'text');  
			newEl.setAttribute('id', valueBox);  
			oldEl.parentNode.replaceChild(newEl, oldEl);  
  
		} else {  
  
			document.getElementById(valueBox).type = 'text';  
		}  
		document.getElementById(dateBox).type = 'text';  
  
	} else {  
  
		if (document.getElementById(dateBox).type == 'text') {  
  
			document.getElementById(dateBox).type = 'hidden';  
		}  
  
		var oldEl = document.getElementById(valueBox);  
		var newEl = document.createElement('textarea');  
		newEl.setAttribute('id', textarea);  
        	newEl.name = valueBox;  
		oldEl.parentNode.replaceChild(newEl, oldEl);  
	}  
}  

Thanks in advance

Gruß Matthis