# Formularelement mit JavaScript erstellen



## vavoum (5. Juli 2004)

Hallo,
bin seit Tagen auf der Suche nach einer Möglichkeit, wie ich mit JavaScript neue
Formularelemte erstellen kann. Ist Das überhaupt möglich?
Mein Probelm ist Folgendes:
Habe ein HTML- Formular, in das der User seine Daten eingeben soll, bei Bedarf
soll der User noch die Möglichkeit haben weitere Daten einzutragen.
Würde dies gern so lösen, daß durch das Anklicken eines Buttons, die "onClick"- Funktion genutzt wird und genau an dieser Stelle dann neue Formularelemte eingeblendet werden. Hat jemand eine Idee, wie ich Das machen könnte, oder eine andere/bessere Idee, wie man mein Problem lösen könnte 
Vielen Dank auf jeden Fall schonmal.
Gruß Vavoum


----------



## Krypthonas (5. Juli 2004)

Du kannst jedes HTML Element hinzufügen. Versuche es einmal per *innerHTML*:


```
document.getElementById("forms").innerHTML+='<input type="text" name="Obj1" id="obj1" value="Ich bin ein Berliner">';
```

In diesem Sinne


----------



## vavoum (6. Juli 2004)

Vielen Dank. Leider verstehe ich Deine "Code- Zeile" nicht wirklich.
Habe noch nie was von "innerHTML" gehört, oder damit gearbeitet. Es wäre toll,
wenn Du so nett sein könntest und mir das ein wenig genauer erklären könntest.


----------



## MikeDe (6. Juli 2004)

vavoum: 

ich schließe mich mal deinem beitrag an weil ich genau sowas suche.

es soll eine selectauswahl und ein eingabefeld immer wieder erstellt werden.


----------



## Krypthonas (6. Juli 2004)

Was soll man darüber großartig sagen. Das *innerHTML* stellt eine JS Funktion dar, mitdem man das HTML Dokument nachhaltig verändern kann. Dabei ist zu beachten das keine offenen Containerverschachtelungen akzeptiert werden. 

Das geincludete Objekt besitzt alle Eigenschaften, was im String definiert wird und diese, die man im laufenen HTML Dokument referenziert hat, wie CSS Styles. 

Beispiel: 

Gebe ich dem input Objekt eine CSS Attribut, dass im laufenden HTML Dokument als CSS Container Klasse definiert ist, stellt dieses neues Objekt sich so dar, wie es in dem CSS Container definiert ist.

Weitere Hilfe dazu findest du natürlich auf *selfhtml@teamone.de *

In diesem Sinne


----------



## vavoum (6. Juli 2004)

ok. Soweit nun klar. Aber warum steht denn vor dem dem "=" noch ein "+" ?


----------



## Tobias Menzel (6. Juli 2004)

Hi,

der += Operator fügt einer Variable bzw. einem Objekt weitere Werte/Eigenschaften hinzu.

Dies ist eigentlich eine Kurzform des Inkrements:
	
	
	



```
variable = variable +2
```
entspricht:
	
	
	



```
variable+=2;
```

Gruß


----------



## MikeDe (6. Juli 2004)

@vavoum: Vielleicht hilft dir das weiter!


```
<html>
<head>

<script>
inputStr="";
function CheckAnzahl(form)
{ 
	var anzahl=Form.Anzahl.selectedIndex;
	if(document.Form.Anzahl.options[anzahl].value != "0")
	{ 
		inputStr+="<table>"; 
		inputStr+="<tr><td></td><td>Name</td><td>Vorname</td></tr>"; 

		for (i=1; i<=anzahl+1; i++)
		{ 
			inputStr+="<tr><td>Person</td><td><input type=\"text\" name=\"name\" size=\"20\"></td><td><input type=\"text\" name=\"vorname\" size=\"20\"></td></tr>"; 
		} 

		inputStr+="</table>"; 
	}

	(document.all) ?
	document.all["ausgabe"].innerHTML=inputStr :
	document.getElementById("ausgabe").innerHTML=inputStr;
} 

</script>

</head>

<body>
<form name="Form"> 
<table width="400" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td width="100">Anzahl </td> 
<td width="150"> 
<select name="Anzahl" onChange="CheckAnzahl(this.form)" size=1> 
<option value="0">1</option> 
<option value="1">2 </option> 
<option value="2">3 </option> 
<option value="3">4 </option> 
<option value="4">5 </option> 
<option value="5">6 </option> 
<option value="6">7 </option> 
<option value="7">8 </option> 
<option value="8">9 </option> 
<option value="9">10</option> 
</select> 
</td> 
<td width="150"><div id="ausgabe"></div></td> 
</tr> 
<tr> 
<td colspan="3" height="10"></td> 
</tr> 
<tr> 
<td width="130"> </td> 
<td width="172">Name</td> 
<td width="98">Vorname</td> 
</tr> 
<tr> 
<td width="130">Person 1</td> 
<td width="172"> 
<input type="text" name="name" size="20"> 
</td> 
<td width="98"> 
<input type="text" name="vorname" size="20"> 
</td> 
</tr> 
</table> 
</form>
</body>
</html>
```


----------



## MikeDe (6. Juli 2004)

Wie bekomme ich das hin, dass immer wieder ein Selectfenster hinzugefügt wird?


```
<html>
<head>
<script>
function CheckAnzahl(form)
{ 
        var anzahl=Form.Anzahl.selectedIndex;
        if(document.Form.Anzahl.options[anzahl].value != "0")
        { 
				inputStr="";
				inputStr+="<select name=\"Anzahl\" onChange=\"CheckAnzahl(form)\">"; 
				inputStr+="<option value=\"0\"></option>"; 
				inputStr+="<option value=\"1\">fuckfuck</option>"; 
				inputStr+="<option value=\"2\">fuckfuck</option>"; 
				inputStr+="<option value=\"3\">fuckfuck</option>"; 
				inputStr+="<option value=\"4\">fuckfuck</option>"; 
				inputStr+="</select>"; 

        }

        document.getElementById("fuck").innerHTML+=inputStr;
} 

</script>

</head>

<body>

<form name="Form" id="fuck"> 
<table width="400" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td width="150">
<select name="Anzahl" onChange="CheckAnzahl(this.form)" size=1> 
<option value="0">1</option> 
<option value="1">2 </option> 
<option value="2">3 </option> 
<option value="3">4 </option> 
<option value="4">5 </option> 
<option value="5">6 </option> 
<option value="6">7 </option> 
<option value="7">8 </option> 
<option value="8">9 </option> 
<option value="9">10</option> 
</select> 
</td>
</tr>
</table> 
</form>
</body>
</html>
```


----------



## vavoum (6. Juli 2004)

@MikeDe, vielen lieben Dank. Dein Skript ist mir wirklich eine große Hilfe.
Leider kenne ich keine Lösung für Dein Problem. Aber ist es Möglich, daß sich Dein Skript, warum auch immer, nicht mit PHP verträgt? Habe natürlich Alles in echo" "; gepackt und die " " in ' ' geändert.


----------



## MikeDe (6. Juli 2004)

Das freut mich nun aber, wenigstens einer glücklich ist!

muss in php funktionieren, das js würde ich ausgliedern und alles andere halt in echo setzen!


----------

