Formularfelder dynamisch hinzufügen

[artw]

Weiß Jemand ob und wie man in einem Formular dynamisch neue Felder hinzufügen kann? Ich habe 5 Felder die nach belieben 1 bis n mal ausgefüllt werden sollen(z.B. nach einem Klick auf ein + Button sollen weitere 5Felder zum Ausfüllen bereit gestellt werden). Es gebe die Möglichkeit einfach eine endliche Anzahl von Feldern zu definieren und sie mit Java Script auszublenden und nur bei bedarf jeweils 5 neue Felder zum Ausfüllen auszugeben. Diese Möglichkeit will ich aber umgehen. Es könnten u.U. sehr viele Felder benötigt werden. Gibt es da ne Möglichkeit mit Java Script neue Formularfelder dynamisch zu erzeugen? Gibt es da was evtl in HTML?

Danke in Vorraus

ArtW

 

[Alarik]

Du könntest sie von Anfang an erzeugen, und per visibility (CSS) unsichtbar machen und dann beim Klick auf den Button werden sie erst angezeigt.

 

[artw]

Genau das wollte ich aber umgehen. Ich kann nicht vorrausehen wie viele Felder mal nötig sich(die ich dann ja im Vorfeld deklarieren müsste). Aber Danke für die Antwort.

MfG

ArtW

 

[dermoritz]

hier:
Javascript - Extending forms

ist ein gutes beispiel dafür.

nur scheitere ich schon daran es zu "kopieren". wenn ich den html-code und das skript kopiere (hab beides in eine html datei kopiert), funktioniert nur der knopf zum felder entfernen und das einmalige ausführen des skripts zu beginn (ein satz von feldern).
der knopf für zusätzliche felder schein jedoch nicht zu funktionieren - es kommt auch kein javascript error.

also wenn es jemand in einem anderen beispiel zum laufen kriegt mir bitte sagen was ich falsch mache.
(wie gesagt ich kopiere das script in den head und den html kram div und form in den body)

 

[dermoritz]

keiner ne idee wieso das skript nach dem kopieren nicht mehr funktioniert?

ich würde auch alternativen nehmen, aber ich benötige wie mein vorredner eine zur laufzeit unbekannte anzahl an formularfeldsätzen - eben genau wie es die demo seite zeigt.

 

[ein schlauer]

keine Ahnung warum das bei dir nicht klappt, aber Fomrularfelder hinzufügen geht einfach mit document.createElement() und dann [node].appendChild()

 

[dermoritz]

ich hab rausgeriegt warum es nicht klappt. es wurde ein externe funktion aufgerufen:
"
window.onload = function () {
if (self.init)
init();
}
"
diese wird hier:
"
function init() {
document.getElementById('moreFields').onclick = moreFields;
moreFields();
}
"
benötigt. und nur damit funzt der knopf. aber wofür brauch ich init(), was macht das? gehts auch ohne?

 

[caschti84]

hallo!

Das habe ich nun hinbekommen . Stellt sich mir nun nur die Frage, wie ich die Werte dann nach dem absenden ausgebe. Könnte mir das mit einer Schleife vorstellen, aber was muss ich mit der Schleife ansprechen?

 

[ein schlauer]

welche Werte?

Die Funktion init weist einem Element einen onclick Handler zu und ruft diesen unmittelbar dananach auf.

 

[xarxes]

hallo

ich habe den code von der webseite 1 zu 1 übernommen, funktionieren tut es aber trotzdem nicht. was genau muss ich machen damit der knopf "give more fields" funktioniert?

 

[ein schlauer]

ich habe den code von der webseite 1 zu 1 übernommen, funktionieren tut es aber trotzdem nicht.

Was bedeutet das? Wir Wissen nicht was du machst, wir wissen auch nicht welche Fehleranlysen du betrieben hast, was in der Fehlerkonsole steht, welchen Browser du benutzt, usw. usf.

 

[ul rich]

hallo

ich habe den code von der webseite 1 zu 1 übernommen, funktionieren tut es aber trotzdem nicht. was genau muss ich machen damit der knopf "give more fields" funktioniert?

Ich habe es auch erst vergeblich versucht so wie es beschrieben wird zum laufen zu bringen. Ich hatte auch das gleiche Problem, dass keine neuen Felder hinzu kamen. Letztendlich habe ich eine sehr einfache Lösung.
Anstatt:

<input type="button" id="moreFields" value="Give me more fields!" />

einfach

<input type="button" onclick="moreFields()" value="Give me more fields!" />

eingeben, dann wird die moreFields Funktion auch ausgeführt.