Hallo,
ich möchte auf meiner Seite einem Formular dynamisch weitere Eingabefelder hinzufügen oder entfernen können. Ich habe dazu auch schon einen passenden Code gefunden und eingebunden, nur funktioniert daran etwas nicht.
Mein Code, zuerst das JavaScript:
<script type="text/Javascript">
var counter = 0;
function moreFields() {
counter++;
var newFields = document.getElementById('teilnehmer').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
}
var insertHere = document.getElementById('add');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
function removeField(click_node)
{
click_node.parentNode.removeChild(click_node);
}
</script>
Und nun der HTML-Teil:
<span id="teilnehmer" style="display: none;">
<table cellspacing="0" style="width:100%;">
<tr>
<td>Vor-/Nachname</td>
<td><input type="text" name="name[]" value="" style="width: 225px;" /></td>
</tr>
<tr>
<td>E-Mail-Adresse</td>
<td><input type="text" name="email[]" value="" style="width: 225px;" /></td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="Teilnehmer entfernen" onclick="removeField(this.parentNode.parentNode.parentNode);" />
</td>
</tr>
</table>
</span>
<form>
<span id="add"></span>
<a href="javascript:moreFields();">weitere Teilnehmer hinzufügen</a>
</form>
Live kann ich das Formular nicht zeigen, da es sich um eine Intranet-Seite handelt, aber die Funktionsweise ist hier zu sehen.
Soweit funktioniert der Code. Aus Design-Gründen soll jedoch kein Button zum Hinzufügen weiterer Felder angezeigt werden, sondern ein Link.
Folgendes funktioniert auch:
<a href="javascript:///" onClick="removeField(this.parentNode.parentNode.parentNode);">Teilnehmer entfernen</a>
Da jedoch LotusNotes mit einem ziemlich alten IE 6 zum Einsatz kommt, funktioniert diese Version auch nicht, da Notes nichts mit dieser Link-Schreibweise anzufangen weiß.
Also folgende Variante:
<a href="javascript:removeField(this.parentNode.parentNode.parentNode);">Teilnehmer entfernen</a>
Und hier hakt es nun. Ich weiß zwar, was hakt: parentNode besitzt keine Properties, denn this wird als DocumentWindow angezeigt.
Nur verstehe ich nicht, wieso das hakt, und wie man dieses Problem lösen kann.
