Javascript-Funktion für Inputfelder

Beitrag von **chrizz** » 30.09.2008, 21:04

Sorry, was gescheiteres ist mir als Titel nicht eingefallen

Mein Problem kann ich auch leider nicht so ohne weiteres in Wort fassen, daher versuche ich das mal zu beschreiben:

Ich habe eine Liste mit einer variablen Anzahl von Input-Feldern (wird mittels PHP erstellt).
Aufbau wäre dann z.B.:
<input0>Text</input>
<input1>Text 2</input>
<input2>Text 3</input>
<input3></input>

Input3 ist in diesem Beispiel leer... Jetzt möchte ich, wenn der User etwas in Input3 schreibt, dass automatisch per JS ein leeren Input4 hinzugefügt wird. D.h. egal wieviele Inputs voll sind, als letztes soll immer ein leeren Input angehangen werden.
Andersrum: Wenn ich den Text aus Input2 lösche, dann soll (also "Text 3"), dann soll dass Input3 verschwinden, weil ja Input 2 leer ist...

Ich hoffe ich hab mich halbwegs verständlich ausgedrückt

Es wäre schön, wenn mir jemand dazu mal nen Stichwort nennen könnte, wonach man suchen kann, denn ich denke sowas wird es sicherlich schon irgendwo geben...

besten Dank

von **Anzeige von ABAKUS** »

Content Erstellung von ABAKUS Internet Marketing
Ihre Vorteile:

einzigartige Texte
suchmaschinenoptimierte Inhalte
eine sinnvolle Content-Strategie
Beratung und Umsetzung

Jetzt anfragen: 0511 / 300325-0

Beitrag von **Airport1** » 30.09.2008, 21:08

_alle_ inputs aufbauen, aber die die erst mal nicht erscheinen sollen mit style="display:none" verstecken. wenn eins eingeblendet werden soll element gezielt ansprechen und mit display:block sichtbar machen.

auf ein formularelement kannste ueber dessen namen oder (find ich besser) ueber getElementById auf seine id zugreifen (ich setze immer gleich beides..).

Beitrag von **chrizz** » 30.09.2008, 21:13

erstmal Danke für die schnelle Antwort...
An deine IDee hatte ich auch schon gedacht, allerdings wollte ich die Sache komplett variabel halten... also theoretisch unendlich viele Inputs... und die alle mit display:none verstecken wäre da nicht sonderlich hilfreich

Aber ich denke mal ich werd die Sache doch begrenzen... dann ist das halt fix und fertig is... das sollte die Sache vermutlich doch etwas einfacher machen...

von **Anzeige von ABAKUS** »

Beitrag von **Mork vom Ork** » 30.09.2008, 23:00

chrizz hat geschrieben:<input0>Text</input>
<input1>Text 2</input>
<input2>Text 3</input>
<input3></input>
[…]
Wenn ich den Text aus Input2 lösche, dann soll (also "Text 3"), dann soll dass Input3 verschwinden, weil ja Input 2 leer ist...

Und wenn Input1 geleert wird, würde dann Input2, mitsamt seinem Inhalt, verschwinden? Sollte nicht eher das geleerte Element selbst entfernt werden?

Kannst es mal mit nachfolgendem probieren, ich hab's allerdings nur schnell zusammengestrickt. Der Code verlässt sich darauf, dass die Elemente pro Zeile einzeln vorliegen, d.h. eine Zeile darf nicht aus zum Beispiel den zwei Elementen <input><br> bestehen. Um die <input>-Elemente trotzdem zeilenweise darzustellen, stecken sie in einer <ul>-Liste (ließe sich aber auch mittels CSS lösen). <li><input> sind auch zwei Elemente? Nicht ganz, bearbeitet wird hier nicht das <input>-Element, sondern das <li>-Element, daher auch die Aufrufe von o.parentNode.parentNode.append-/removeChild(), parentNode.parentNode ist die <ul>-Liste.

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http&#58;//www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>

<script type="text/javascript">
var bla = 4; // Zähler für <input>-Namen

function nocheiner&#40;o&#41; &#123;
	var nachbar = o.parentNode;
	while &#40;&#40;nachbar = nachbar.nextSibling&#41; && &#40;nachbar.nodeType != 1&#41;&#41;	&#123; // nächsten echten Nachbarn finden, d.h. <x>-Elemente, keine einfachen Textknoten
	&#125;
	
	if &#40;&#40;o.value == ""&#41; && &#40;nachbar&#41;&#41; &#123; // Feld wurde geleert und ist nicht letztes&#58; Dieses löschen.
		o.parentNode.parentNode.removeChild&#40;o.parentNode&#41;;
	&#125;
	else if &#40;&#40;o.value != ""&#41; && &#40;!nachbar&#41;&#41; &#123; // Feld nicht leer und ist letztes&#58; Neues anhängen.
		var input = document.createElement&#40;"input"&#41;;
		input.type = "text";
		input.name = "bla" + bla;
		bla++;
		input.setAttribute&#40;"onBlur", "nocheiner&#40;this&#41;;"&#41;;
			
		var li = document.createElement&#40;"li"&#41;;
		li.appendChild&#40;input&#41;;
		o.parentNode.parentNode.appendChild&#40;li&#41;;
	&#125;
&#125;
</script>

</head>

<body>

<ul>
<li><input type="text" name="bla1" value="blo" onblur="nocheiner&#40;this&#41;"></li>
<li><input type="text" name="bla2" value="bli" onblur="nocheiner&#40;this&#41;"></li>
<li><input type="text" name="bla3" value="" onblur="nocheiner&#40;this&#41;"></li>
</ul>

</body>

</html>

Beitrag von **chrizz** » 01.10.2008, 09:07

cool. vielen Dank!
werd ich heute abend mal ausprobieren und dann ggf. umbasteln...