Formularelement mit JavaScript erstellen

V

vavoum

Grünschnabel
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
 
Du kannst jedes HTML Element hinzufügen. Versuche es einmal per innerHTML:

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

In diesem Sinne
 
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.
 
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.
 
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
 
Hi,

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

Dies ist eigentlich eine Kurzform des Inkrements:
PHP: 
variable = variable +2
entspricht:
PHP: 
variable+=2;

Gruß
 
@vavoum: Vielleicht hilft dir das weiter!

PHP: 
<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>
 
Zuletzt bearbeitet:
Wie bekomme ich das hin, dass immer wieder ein Selectfenster hinzugefügt wird?

PHP: 
<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>
 
@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.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück