nicht angemeldet
Input Feld per Javascript hinzufügen
0 
Der Martin
0 0 0 0 
Struppi
Input Feld per Javascript hinzufügen
Hallo,
ich möchte gerne ein Input Feld per Javascript dynamisch beliebig oft in ein HTML Dokument hinzufügen, dazu habe ich mir folgenden Test-Code geschrieben:
<html><head><title>Test</title></head>
<body>
<span id="Test"></span>
<script type="text/javascript">
var el = document.createElement('input');
el.setAttribute('type', 'text');
el.setAttribute('name', 'text[]');
el.setAttribute('size', 40);
function addTest() {
document.getElementById('Test').appendChild(el);
}
</script>
<button onclick="addTest()"></button>
</body></html>
Ich erzeuge also mein Input Feld und füge es dann in das Span hinzu, funktioniert so weit auch wunderbar. Allerdings fügt er immer nur genau 1 Input Feld hinzu. Klicke ich ein 2. Mal auf den Button passiert einfach gar nichts mehr, auch keine Fehlermeldung.
Weiß jemand Rat, wie ich meinen Code umstellen muss, damit ich bei jedem Klick auf den Button ein weiteres Input Feld anfügen kann?
Vielen Dank für die Hilfe
Marc
-
Hi,
<body>
<span id="Test"></span>
<script type="text/javascript">
var el = document.createElement('input');
el.setAttribute('type', 'text');
el.setAttribute('name', 'text[]');
el.setAttribute('size', 40);damit erzeugst du *einmal* beim Laden der Seite ein neues input-Element und legst es erstmal beiseite. Übrigens kannst du auch direkt auf die Eigenschaften des HTML-Elementobjekts zugreifen:
el.type = 'text';
el.name = 'text[]';
el.size = 40;Das ist einfacher zu schreiben, sieht übersichtlicher aus - und es versteht sogar der IE ohne Probleme, während er mit setAttribute() gern mal zickt.
function addTest() {
document.getElementById('Test').appendChild(el);
}
</script>
<button onclick="addTest()"></button>Du versuchst also, immer wieder *dasselbe* Objekt ins Dokument einzubauen. Das ist so, als wolltest du immer wieder denselben Blumentopf ans Fenster stellen. Wenn du neue Elemente willst, musst du auch neue Objekte erzeugen.
So long,
Martin--
There are 10 types of people in the world: Those who understand the binary system, and those who don't.-
Du versuchst also, immer wieder *dasselbe* Objekt ins Dokument einzubauen. Das ist so, als wolltest du immer wieder denselben Blumentopf ans Fenster stellen. Wenn du neue Elemente willst, musst du auch neue Objekte erzeugen.
Klar, logisch, du hast Recht, ich bin wohl gedanklich schon im Urlaub. Habe den JS Teil wie folgt umgeschrieben und schon funktioniert es:
<script type="text/javascript"> function addTest() { var el = document.createElement('input'); el.type = 'text'; el.name = 'text[]'; el.size = '40'; document.getElementById('Test').appendChild(el); } </script>Danke und einen guten Rutsch
Marc
-
-
Es geht auch kürzer:
var nameI = "123", idI = "123", valueI = "Hier steht was"; document.write('<input type="text" name='"+ nameI +"' id='"+ idI +"' value='"+ valueI +"' />');Damit erzeigst du nur EIN Input-Feld, lass es in einer Schleife laufen, und ändere die ID und Namen (opt) und du erzeugst x-Felder.
Das gleiche bei deinem Code, einfach in einer Schleife laufen lassen.
-
Es geht auch kürzer:
var nameI = "123", idI = "123", valueI = "Hier steht was";
document.write('<input type="text" name='"+ nameI +"' id='"+ idI +"' value='"+ valueI +"' />');du weist, dass du so nach dem Laden der Seite die Seite komplett überschreibst?-
du weist, dass du so nach dem Laden der Seite die Seite komplett überschreibst?
Nicht wenn du diesen Teil in eine Funktion packst, und an der richtigen Stelle aufrufst.
-
du weist, dass du so nach dem Laden der Seite die Seite komplett überschreibst?
Nicht wenn du diesen Teil in eine Funktion packst, und an der richtigen Stelle aufrufst.die Funktion ist egal, aber du kannst nur während dem laden so Elemente hinzufügen, nach dem laden der Seite geht das so nicht und ist daher dein Vorschlag auch keine Lösung, da es darum ging nachträglich Elemente einzubauen.
Struppi.
-
du weist, dass du so nach dem Laden der Seite die Seite komplett überschreibst?
Nicht wenn du diesen Teil in eine Funktion packst, und an der richtigen Stelle aufrufst.die Funktion ist egal, aber du kannst nur während dem laden so Elemente hinzufügen, nach dem laden der Seite geht das so nicht und ist daher dein Vorschlag auch keine Lösung, da es darum ging nachträglich Elemente einzubauen.
Struppi.
Genau und ich brauche die Elemente auch genau an einer bestimmten Stelle, daher das Span Tag (könnte natürlich auch ein Div oder so etwas sein), ich hab auch mal das InnerHTML von dem Span Tag immer wieder mit += gefüllt, aber dann besteht das Problem, dass der Inhalt des 1. Input Feldes überschrieben wird, sobald man über den Button ein 2. anlegt.
-
-
-
-