Eingabefelder dynamisch ein- und ausblenden

[RegShoe]

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.

[JonnyTrap]

Wenn es doch "nur" um den Link geht, versuch doch mal

<a href="#" onClick="removeField(this.parentNode.parentNode.parentNode);">Teilnehmer entfernen</a>

[HJST1979]

Hallo,

warum baust du deine Seite nicht mit PHP auf ? Javascript kann man abschalten !!

Mit php haste normalerweise immer den gewünschten effekt, außer du hast einen Fehler im code :-)