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.

 

[Sven Mintel]

Bei Aufrufen per javascript:weisdergeier über das href-Attribut eines Links existiert this nicht.

this ist bei einem Event ein Zeiger auf das auslösende Element....aber dort feuert ja kein Event, sondern es wird ein Link verfolgt.

Lösung:
Du hast da ja eine Variable "counter"...anhand dieser ist es dir möglich, den zuletzt eingefügten Knoten zu Ermitteln(vergiss beim Entfernen eines Knotens aber nicht, counter zu dekrementieren )

 

[RegShoe]

Danke für Deine Erklärung... wieder was dazugelernt.

Wie man den zuletzt eingefügten Knoten wieder entfernt, habe ich verstanden und kriege ich auch selbst hin.
Nur wie ist es mit dem Entfernen von Knoten "aus der Mitte"? Wenn ich also beispielsweise 5 Knoten hinzugefügt habe und den dritten entfernen will? Dazu müsste ich ja beim Aufruf der Funktion removeField mit übergeben, von wo aus geklickt wurde?


In dem Zusammenhang sitze ich gerade noch an einem Problem:
warum zum Teufel übergibt der IE (egal welche Version) Input-Felder meines Formulars nicht, die auf den oben geposteten Code folgen?
Ich habe mir momentan damit geholfen, dass ich den dynamischen Teil ans Ende meines Formulars gestellt habe, aber das kann es ja auch nicht sein...

 

[Sven Mintel]

Nur wie ist es mit dem Entfernen von Knoten "aus der Mitte"? Wenn ich also beispielsweise 5 Knoten hinzugefügt habe und den dritten entfernen will? Dazu müsste ich ja beim Aufruf der Funktion removeField mit übergeben, von wo aus geklickt wurde?

Das funktioniert doch auch...dafür hast du in dem Formular ja die Buttons zum Entfernen.
Da dort ein Event feuert beim click(im Gegensatz zu dem Link)...wird this auch korrekt an die Funktion übergeben.