WinFuture-Forum.de: Javascript Problem - WinFuture-Forum.de

Zum Inhalt wechseln

Nachrichten zum Thema: Entwicklung
Seite 1 von 1

Javascript Problem


#1 Mitglied ist offline   Marek123 

  • Gruppe: aktive Mitglieder
  • Beiträge: 46
  • Beigetreten: 23. Dezember 05
  • Reputation: 0
  • Wohnort:Hattingen
  • Interessen:Webdesign/Coding

geschrieben 01. Oktober 2008 - 12:52

Hallo Leute
ich versuch mich gerade an JS. Ja, ich muss leider gottes zugeben, dass ich da nicht so der Checker bin.

Ich möchte, für eine Eingabemaske, die ich mittels PHP realisiere, eine dynamische Felderzeugung proggen, sprich... wenn ich auf "Band hinzufüge" klicke, sollen zwei weitere input-felder erstellt werden, eins für "bandnamen" und eins für "bandurl"(webseite etc.)

Hab mich da schon durchgegoogelt und auch 1-2 brauchbare Skripte gefunden, diese angepasst nur dann funktionierte es leider bei mir nicht mehr und nun bin ich ratlos.

Vllt könnt ihr mir ja helfen, hier der modifizeirte Code:

CODE

</body>
</html>
<html>
<head>
<title>Test</title>
<script type="text/JavaScript">
ip_nr=3;

function band(){
ip_nr++;
document.getElementById('dynamic_input').innerHTML += "<input type='text' name='band_"+ip_nr+"' value='"+document.getElementById("band_2").value"'>";
ip_nr++;
document.getElementById('dynamic_input').innerHTML += "<input type='text' name='bandurl_"+ip_nr+"' value='"+document.getElementById("bandurl_2").value"'><br>";
return 0;
}

</script>
</head>
<body>

<form action='test.php' method='POST'>
<div id='dynamic_input'>
<input type='text' name='band_2' id='band_2'><input type='text' name='bandurl_2' id='bandurl_2'><br>
</div>
<button type='button' onClick="band();">neues Input-Feld</button>
</form>
</body></html>


es zeigt mir immer an "band not defined" nur ich weiss nicht wieso.

Eine andere version des Skripte funktionierte zwar, jedoch wurden alle Felder gelöscht, wenn ein neues hinzugefügt wurde..das war nicht sooo praktisch.

Danke schon mal...

Dieser Beitrag wurde von Marek123 bearbeitet: 01. Oktober 2008 - 12:52

0

Anzeige



#2 Mitglied ist offline   Halt's_Maul_Paul 

  • Gruppe: aktive Mitglieder
  • Beiträge: 257
  • Beigetreten: 18. Dezember 04
  • Reputation: 0
  • Geschlecht:Männlich
  • Wohnort:HH

geschrieben 01. Oktober 2008 - 13:10

Hey!

Also erstmal sollte man wohl die beiden Close-Tags (</body></html>) am Anfang entfernen ^^

Und fuer den Fehler sorgen 2 fehlende '+'-Zeichen (in der unten stehenden Version in Zeile 9 und 11 jeweils hinter dem value) !
Korrekt sieht es dann so aus:

<html>

<head>
	<title>Test</title>
	<script type="text/JavaScript">
		ip_nr=3;
		function band() {
			ip_nr++;
			document.getElementById('dynamic_input').innerHTML += "<input type='text' name='band_"+ip_nr+"' value='"+document.getElementById("band_2").value+"'>";
			ip_nr++;
			document.getElementById('dynamic_input').innerHTML += "<input type='text' name='bandurl_"+ip_nr+"' value='"+document.getElementById("bandurl_2").value+"'><br>";
			return 0;
		}
	</script>
</head>

<body>
	<form action='test.php' method='POST'>
		<div id='dynamic_input'>
			<input type='text' name='band_2' id='band_2'><input type='text' name='bandurl_2' id='bandurl_2'><br>
		</div>
		<button type='button' onClick="band();">neues Input-Feld</button>
	</form>
</body>

</html>


So funzt das jetz bei mir (FF3.0.3 unter Vista) ohne Probleme!

Dieser Beitrag wurde von Halt's_Maul_Paul bearbeitet: 01. Oktober 2008 - 13:12

main-system on nethands

Gentoo - Debian - LFS
- - - - - - - - - - - - - - - - - - - - - - - - -
Beten wir alle zu unserem Schöpfer, dass der Internet Explorer 6 bald das Zeitliche segnet. Und wenn es geht, seinen jungen und auch nicht ganz koscheren Bruder mit der Nummer 7 gleich mitnimmt. (Versionsnummern natürlich beliebig austauschbar ;P )
[zitat von Peter Kropff - Tutorials HTML/CSS]
0

#3 Mitglied ist offline   Marek123 

  • Gruppe: aktive Mitglieder
  • Beiträge: 46
  • Beigetreten: 23. Dezember 05
  • Reputation: 0
  • Wohnort:Hattingen
  • Interessen:Webdesign/Coding

geschrieben 01. Oktober 2008 - 13:22

Danke Danke!!
Ja die Tags waren n versehen von einem test von mir.. vergessen dien zu kicken!

Das funzt tadelos, außer... dass wenn ich z.b 1,1 in die felder eintippe.. und dann ein neues feld erzeugt wird... er die 1,1 löscht bzw die linke 1 in das neue linke feld übernimmt, und die rechte löscht... same auch mit weiteren werten....

Irgend eine Idee?

*EDIT*

Scheint, dass das problem nur im FF besteht. Im IE7 funktioniert es so wie ich es will.

*EDIT 2*
Wie gesagt, im IE funzt es super, die Werte bleiben erhalten etc. und im FF. löscht er ALLE Werte in allen Feldern, und übernimmt nur den Wert von dem linken input, für das neue Feld... rest wird gelöscht.

alles beim "Feld hinzufügen"

Dieser Beitrag wurde von Marek123 bearbeitet: 01. Oktober 2008 - 14:03

0

#4 Mitglied ist offline   Halt's_Maul_Paul 

  • Gruppe: aktive Mitglieder
  • Beiträge: 257
  • Beigetreten: 18. Dezember 04
  • Reputation: 0
  • Geschlecht:Männlich
  • Wohnort:HH

geschrieben 01. Oktober 2008 - 19:38

Heyo!

Also, ich habe dir jetz einfach mal was neues geschrieben, mit dem du dann auch noch beliebig weiterbasteln kannst.
Mit innerHTML ganze HTML Tags anhaengen ist nicht besonders elegant und sollte vermieden werden.
Die Loesung hier ist jetzt mit dem DOM realisiert.

Bei Fragen einfach an mich wenden (oder an die ganzen anderen Wissenden :blink: )!

<html>

<head>
	<title>Test</title>
	<script type="text/JavaScript">
		var ip_nr = 2;
		
		//	Erstellt ein neues HTML/DOM-Element und setzt die Attribute die ueber den Funktionsaufruf uebergeben werden. Anschliessend gibt die Funktion das ganze DOM-Element als Return-Wert zurueck	//
		function createInput(name, id, value) {
			var new_input = document.createElement("input");
			new_input.setAttribute("type", "text");
			new_input.setAttribute("name", name);
			new_input.setAttribute("id", id);
			new_input.setAttribute("value", value);
			
			return new_input;
		}
		
		function newBand() {
			//	Das 'Eltern'-Element unter welchem die neuen Buttons dann eingeblendet werden sollen	//
			var dynamic_input = document.getElementById("dynamic_input");
			//	Das letzte bisherige Element Teil 1	//
			var last_input_1 = document.getElementById("band_"+ip_nr);
			//	Und Teil 2	//
			var last_input_2 = document.getElementById("bandurl_"+ip_nr);
			//	Jetzt die Nummer um eins erhoehen, damit beim naechsten Funktionsaufruf wieder das letzte in der Liste abgefragt wird	//
			ip_nr++;
			
			//	Erstes Element erstellen und in die Variable 'new_input_1' speichern. Dabei nen neuen namen und ne neue ID vergeben und den Inhalt des letzten Inputs. //
			var new_input_1 = createInput("band_"+ip_nr, "band_"+ip_nr, last_input_1.value);
			//	Und zum zweiten	//
			var new_input_2 = createInput("bandurl_"+ip_nr, "bandurl_"+ip_nr, last_input_2.value);
			//	Einfach nen Zeilenumbruch erstellen	//
			var new_line = document.createElement("br");
			
			//	Und alles an das Eltern Element anhaengen	//
			dynamic_input.appendChild(new_input_1);
			dynamic_input.appendChild(new_input_2);
			dynamic_input.appendChild(new_line);
		}
	</script>
</head>

<body>
	<form action='test.php' method='POST'>
		<div id='dynamic_input'>
			<input type='text' name='band_2' id='band_2' /><input type='text' name='bandurl_2' id='bandurl_2' /><br />
		</div>
		<button type='button' onClick="newBand();">neues Input-Feld</button>
	</form>
</body>

</html>

main-system on nethands

Gentoo - Debian - LFS
- - - - - - - - - - - - - - - - - - - - - - - - -
Beten wir alle zu unserem Schöpfer, dass der Internet Explorer 6 bald das Zeitliche segnet. Und wenn es geht, seinen jungen und auch nicht ganz koscheren Bruder mit der Nummer 7 gleich mitnimmt. (Versionsnummern natürlich beliebig austauschbar ;P )
[zitat von Peter Kropff - Tutorials HTML/CSS]
0

Thema verteilen:


Seite 1 von 1

1 Besucher lesen dieses Thema
Mitglieder: 0, Gäste: 1, unsichtbare Mitglieder: 0