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