Zum Inhalt springen

Javascript: Elemente im Text erzeugen


Empfohlene Beiträge

Geschrieben

Hallo,

ich möchte folgendes realisieren:

in einem Formular möchte ich per Klick auf einen Button ein neues Element erzeugen.

z. B. habe ich ein Formular mit 3 Textfelder. Irgendwo ist ein Button. Wenn nun der Button gedrückt wird, soll unter dem 3 Feld ein viertes Feld erscheinen. Drückt man den Button nochmals ein fünftes usw.

[button Feld erzeugen]

Feld 1 [_______________] also <input type=text name=feld1><br>

Feld 2 [_______________] also <input type=text name=feld2><br>

Feld 3 [_______________] also <input type=text name=feld3><br>

Feld 4 [_______________] ereugtes Feld 4 (also nicht im Quelltext zu sehen)

Feld 5 [_______________] ereugtes Feld 5 (also nicht im Quelltext zu sehen)

ich habe dazu eine kleine Funktion gebastelt, die per Event "onclick" aufgerufen wird, wenn der Button geklickt wird.

also:

<input type=button value="erzeuge feld" onclick="javascript:felderzeugen();">

leider erzeugt mir die funktion eine komplett neue seite, wo dann nur das feld oben steht und alles andere weg ist. ich möchte aber nur, dass das feld an die Anderen angehängt wird. Wie mache ich das?

mit:

document.write("<input type=text name=feld>");

geht es nicht.

danke für Eure Hilfe.

Geschrieben

Geht IMHO nicht :(, wenn dann höchstens mit ner add()-Methode. Hab aber nichts passendes bei SelfHTML gefunden.

Ich würde die Sache an deiner Stelle mit ner serverseitigen Scriptsprache machen (PHP,Perl,JSP,ASP etc.).

Geschrieben

So geht es


<HTML>

<HEAD>

<TITLE>Test</TITLE>

<script language="JavaScript">

function NewField() {

  var NewInput = document.createElement("input");

  var NewBR = document.createElement("br");

  var Ausgabebereich = document.getElementById("dummyFormID");

  Ausgabebereich.appendChild(NewInput);

  Ausgabebereich.appendChild(NewBR);

}

</script>

</HEAD>

<BODY>

<form name="dummyForm" id="dummyFormID">

  <input type="button" name="btnNeu" value="neues Feld erstellen" onclick="NewField();"><br><br>

  <input type="text" name="text1"><br>

  <input type="text" name="text2"><br>

  <input type="text" name="text3"><br>

</form>

</BODY>

</HTML>

Geschrieben

ja prima! exakt, das was ich gebraucht habe! :uli

was mir jetzt noch nicht ganz klar ist, wie sind die felder benannt?? klar! die ersten 3 felder sind mit text1, text2, text3 benannt. ich muss die felder ja dann in einem script (in diesem fall php), welches die daten aufnimmt, identifizieren können. dies möchte ich das mittels einem array lösen, da es anders sowieso nicht geht.

also

text[1]

text[2]

text[3]

text[4]

usw.

Geschrieben

<HTML>

<HEAD>

<TITLE>Test</TITLE>

<script language="JavaScript">

function NewField() {

  var NewInput = document.createElement("input");

  var NewBR = document.createElement("br");

  var Ausgabebereich = document.getElementById("dummyFormID");

  NewInput.name = "test[]";

  Ausgabebereich.appendChild(NewInput);

  Ausgabebereich.appendChild(NewBR);

}

</script>

</HEAD>

<BODY>

<form name="dummyForm" id="dummyFormID">

  <input type="button" name="btnNeu" value="neues Feld erstellen" onclick="NewField();"><br><br>

  <input type="text" name="text[]"><br>

  <input type="text" name="text[]"><br>

  <input type="text" name="text[]"><br>

</form>

</BODY>

</HTML>

Erstelle ein Benutzerkonto oder melde Dich an, um zu kommentieren

Du musst ein Benutzerkonto haben, um einen Kommentar verfassen zu können

Benutzerkonto erstellen

Neues Benutzerkonto für unsere Community erstellen. Es ist einfach!

Neues Benutzerkonto erstellen

Anmelden

Du hast bereits ein Benutzerkonto? Melde Dich hier an.

Jetzt anmelden

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...