"Dynamisches" Formular

S

Sarah18

Grünschnabel
Hallo liebes Forum, mein erster Post und gleich eine Frage *G*

Ich will ein Formular schreiben mit Eingabefeldern. Da das ganze recht schlank bleiben soll, sind am Anfang nur wenige Eingabefelder da, braucht man zusätzliche, kann man diese mit einem "+" hinzufügen, bzw "-"wieder entfernen.

Beispiel:
Vorname [ ]+-
Nachname [ ]+-

Klickt man nun auf das "+" bekommt man ein zweites "vorname" Input Feld, bzw auf "-" löscht er genau dieses Feld wieder.

Denke das ganze sollte über rein html/Javascript klappen, was ich aus anderen Tutorials von hier gelesen habe ist DOM ein heißer Tipp ala "document.getElementById('DivName').innerHTML +="
 
Hi,

hab dir nen Demo geschreben, es wird auch schon berücksichtigt, dass immer 1 Textfeld bleiben soll.

Da es ja auch "-" giebt, würde document.getElementById('DivName').innerHTML +="
an die Grenzen stoßen, ich habe mit appendChild und removeChild gearbeitet.

Es wird auch das name-Attribut unique gesetzt
=> keine Probleme beim Übertragen der Formulardaten per GET / POST

Code: 
<html>

	<head>
		<script type="text/javascript">
			function addVorname() {
				textfeld = document.createElement("input");
				textfeld.type = "text";
				textfeld.name = "vorname" + document.getElementById('wrapperVornamen').getElementsByTagName("input").length;
				document.getElementById('wrapperVornamen').appendChild(textfeld);

				if(document.getElementById('wrapperVornamen').getElementsByTagName("input").length < 2){
					document.getElementById('minusButtonVorname').style.disabled = true;		
				}
				else{
					document.getElementById('minusButtonVorname').disabled = false;
				}
			}
			function removeVorname() {
				document.getElementById('wrapperVornamen').removeChild(
					document.getElementById('wrapperVornamen').getElementsByTagName("input")[document.getElementById('wrapperVornamen').getElementsByTagName("input").length-1]
				);

				if(document.getElementById('wrapperVornamen').getElementsByTagName("input").length < 2){
					document.getElementById('minusButtonVorname').disabled = true;
				}
				else{
					document.getElementById('minusButtonVorname').disabled = false;
				}
			}

			function addNachname() {
				textfeld = document.createElement("input");
				textfeld.type = "text";
				textfeld.name = "nachname" + document.getElementById('wrapperNachnamen').getElementsByTagName("input").length;
				document.getElementById('wrapperNachnamen').appendChild(textfeld);

				if(document.getElementById('wrapperNachnamen').getElementsByTagName("input").length < 2){
					document.getElementById('minusButtonNachname').style.disabled = true;		
				}
				else{
					document.getElementById('minusButtonNachname').disabled = false;
				}
			}
			function removeNachname() {
				document.getElementById('wrapperNachnamen').removeChild(
					document.getElementById('wrapperNachnamen').getElementsByTagName("input")[document.getElementById('wrapperNachnamen').getElementsByTagName("input").length-1]
				);

				if(document.getElementById('wrapperNachnamen').getElementsByTagName("input").length < 2){
					document.getElementById('minusButtonNachname').disabled = true;
				}
				else{
					document.getElementById('minusButtonNachname').disabled = false;
				}
			}
		</script>
	</head>

<body>

	<form>

		Vornamen: 
		<span id="wrapperVornamen">
			<input type="text" name="vorname" />
		</span>
		<button type="button" onclick="addVorname();">+</button>
		<button type="button" onclick="removeVorname();" id="minusButtonVorname" disabled="true">-</button>

		<br />

		Nachnamen: 
		<span id="wrapperNachnamen">
			<input type="text" name="nachname" />
		</span>
		<button type="button" onclick="addNachname();">+</button>
		<button type="button" onclick="removeNachname();" id="minusButtonNachname" disabled="true">-</button>

		<br />

		<input type="submit" value="Los!" />

	</form>

</body>

</html>

Working example bei jsFiddle: http://jsfiddle.net/UnGgq/2/
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück