dynamisches Forumlar

[mr b]

hallo,
ich hab ein dynamisches Formular per Javascript mehr oder weniger verfasst bzw. zusammengeschnitten. In diesem Forumlar kann man anhand von Javascript Input Felder hinzufügen. Das funktioniert bis jetzt auch ganz gut. Doch nun würde ich es gerne noch so ein bauen, dass man das zuletzt hinzugefügt Input Feld wieder entfernen kann. Da scheiter ich jetzt leider. Ich habe es so versucht:

<script type="text/javascript">
function Hinzufuegen(){

document.all.User.innerHTML += '<input type="text" name="T[]" size="10" value=""><br>';
}

function Entfernen(){

document.all.User.innerHTML -= '<input type="text" name="T[]" size="10" value=""><br>';
}

</script>

Das funkioniert aber leider nicht. Wenn ich jetzt das letzte Feld wieder entfernen will, dann löscht er alle Felder und im Layer steht nurnoch NaN. Hinzu muss ich sagen, ich bin ein ziemlicher Javascript Anfänger. Aber vielleicht hat ja trozdem jmd. einen Lösungsvorschlag für mich. Wäre euch für jegliche Hilfe dankbar:)

hippe-die-hop
          b

[Sven]

Hola,

<script type="text/javascript">
function Hinzufuegen(){
  document.all.User.innerHTML += '<input type="text" name="T[]" size="10" value=""><br>';
}
function Entfernen(){
  document.all.User.innerHTML -= '<input type="text" name="T[]" size="10" value=""><br>';
}
</script>

Du schreibst kein javaScript, sondern jscript. Verwende anstatt
document.all lieder DOM (Document Object Model, siehe http://www.w3.org).

Und natürlich geht es nicht so, wie du willst. das Erste mal fügst du direkt einen Text an den Node mit der ID "User" an, das zweite mal willst du genau da wieder TExt löschen. EIne Lösung wäre, wenn du deinem <input> jeweils eine ID gibts und mithilfe dieser das Ding dann wieder löscht.

Gruß,

Sven

[Tom]

Hello,

Und natürlich geht es nicht so, wie du willst. das Erste mal fügst du direkt einen Text an den Node mit der ID "User" an, das zweite mal willst du genau da wieder TExt löschen. EIne Lösung wäre, wenn du deinem <input> jeweils eine ID gibts und mithilfe dieser das Ding dann wieder löscht.

Und vielleicht hilf Dir auch http://de.selfhtml.org/javascript/objekte/htmlelemente.htm

Harzliche Grüße aus http://www.annerschbarrich.de

Tom

[Tobias Kloth]

Hallo Sven,

EIne Lösung wäre, wenn du deinem <input> jeweils eine ID gibts und mithilfe dieser das Ding dann wieder löscht.

oder mit den Kinderknoten des Elements arbeiten (z.B. wie im Beispiel auf http://de.selfhtml.org/javascript/objekte/node.htm#child_nodes).

Grüße aus Nürnberg
Tobias

[Sven]

Moin Tobias,

EIne Lösung wäre, wenn du deinem <input> jeweils eine ID gibts und mithilfe dieser das Ding dann wieder löscht.
oder mit den Kinderknoten des Elements arbeiten (z.B. wie im Beispiel auf http://de.selfhtml.org/javascript/objekte/node.htm#child_nodes).

noch viel besser. bei der Angabe einer ID könnte es nämlich zu Komplikationen kommen, denn woher weiß denn der BRowser, was er machen soll, wenn da

<input type="text" id="bla" name="blo" value="bli" />

steht? Soll er nun ...?blo=bli oder ...?bla=bli an den Server schicken?

Gruß,

Sven

[wahsaga]

hi,

noch viel besser. bei der Angabe einer ID könnte es nämlich zu Komplikationen kommen, denn woher weiß denn der BRowser, was er machen soll, wenn da

<input type="text" id="bla" name="blo" value="bli" />

steht? Soll er nun ...?blo=bli oder ...?bla=bli an den Server schicken?

blo=bli natürlich.

http://www.w3.org/TR/html4/interact/forms.html#h-17.13.2 sagt eindeutig:

A successful control is "valid" for submission. Every successful control has its control name paired with its current value as part of the submitted form data set.

und das hat sich AFAIK auch mit XHTML nicht geändert, bei einem formularelement soll immer noch das paar (name|value) übertragen werden.

gruß,
wahsaga

[Sven]

Hello,

A successful control is "valid" for submission. Every successful control has its control name paired with its current value as part of the submitted form data set.
und das hat sich AFAIK auch mit XHTML nicht geändert, bei einem formularelement soll immer noch das paar (name|value) übertragen werden.

Ok, das klingt überaus überzeugend, aber da man anstatt

<input type="text" name="blo" value="bli">

laut HTML 4.01 strict schreiben soll:

<input type="text" id="blo" value="bli">

war ich mir da halt nicht so sicher. Ist jedenfalls gut zu wissen :)

Gruß,

Sven

[Tobias Kloth]

Hallo Sven,

laut HTML 4.01 strict schreiben soll:
<input type="text" id="blo" value="bli">

wo soll das stehen?

Grüße aus Nürnberg
Tobias

[mr b]

heyho,
danke für die Idee und Deine Hilfe. Aber wie soll das mit dem Kindknoten funktinonieren? Versteh ich net so ganz. Könntest Du das ganze vielleicht an einem Beispielscode veranschaulichen? Wär Dir sehr verbunden *g

hippe-die-hop
          b

Hallo Sven,

EIne Lösung wäre, wenn du deinem <input> jeweils eine ID gibts und mithilfe dieser das Ding dann wieder löscht.
oder mit den Kinderknoten des Elements arbeiten (z.B. wie im Beispiel auf http://de.selfhtml.org/javascript/objekte/node.htm#child_nodes).

Grüße aus Nürnberg
Tobias

[Tobias Kloth]

Hallo,

Aber wie soll das mit dem Kindknoten funktinonieren? Versteh ich net so ganz.

Was genau verstehts du nicht? Was hast du bisher ausprobiert?

[Fullquote entfernt]

http://learn.to/quote

Grüße aus Nürnberg
Tobias

[Siechfred]

Hallo.

danke für die Idee und Deine Hilfe. Aber wie soll das mit dem Kindknoten funktinonieren? Versteh ich net so ganz. Könntest Du das ganze vielleicht an einem Beispielscode veranschaulichen? Wär Dir sehr verbunden *g

Mit Hilfe der childNodes-Eigenschaft kannst du, wie im von Tobias verlinkten Beispiel, ein Array aller Kindknoten eines bestimmten Elementes (z.B. eines Formulares) erhalten:

Elternelement:           <form id="formular">
Kindknoten 1:              <input name="node1" type="text" value="Knoten 1">
Kindknoten 2:              <input name="node2" type="text" value="Knoten 2">
Kindknoten 3:              <input name="node3" type="hidden" value="Knoten 3">
Kindknoten 4:              <input name="node4" type="submit" value="Knoten 4">
Ende des Elternelements: </form>

Diese durchläufst du wie in http://de.selfhtml.org/javascript/sprache/schleifen.htm#for beschrieben und vergleichst beispielsweise den mittels des name-Attributs vergebenen Namen mit dem Namen des input-Feldes, das du löschen willst. Natürlich kannst du den Konten auch direkt über den Index ansprechen, sofern er dir bekannt ist. Gelöscht wird mit Hilfe der remoceChild-Methode:

http://de.selfhtml.org/javascript/objekte/node.htm#remove_child

Diese kleine JavaScript-Funktion, die dir alle Knoten o.g. Formulares liefert, sollte dir den Einstieg erleichtern:

<script type="text/javascript">
<!--
function Knoten() {
  var foo = document.getElementById('formular');
  for(a=0;a<foo.childNodes.length;a++) {
    alert(foo.childNodes[a].nodeName+": "+foo.childNodes[a].nodeValue);
  }
}
//-->
</script>

Freundschaft!
Siechfred