Neues Input per Javascript löscht Inhalte

Janniboy · 10. Juli 2013

Hallo Leute,

ich habe mal eine Frage, da ich es einfach nicht gebacken kriege.
Ich habe ein Link mit dem ich per onclick ein neues SELECT und INPUT Feld einfüge. Wähle ich jetzt in dem SELECT-Feld etwas aus und gebe ein Wert dahinter ein, ist alles gut. Möchte ich dann noch ein weiteres Feld danach einfügen, geht das zwar, aber er löscht mir meine alte Eingabe wieder.

Weiß einer wieso das so ist?

Hier mal der Code:

PHP:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Inhalte weg bei neuem Feld</title>
<script>
function neueZeile()
{
	document.getElementById('variableFelder').innerHTML += '<div id="variabel' + variableFelder.getElementsByTagName('div').length + '"><select name="test[]" style="width:10%;"><option value="1">nummer 1</option><option value="2">nummer 2</option><option value="3">nummer 3</option></select> &nbsp; <input type="text" name="menge[]" value="" maxlength="2" style="width:20px;text-align:center;" required></div>';
}
</script>
</head>

<body>

<form action="" method="post">
	<div id="variableFelder"></div>
	<a href="javascript:void(0);" onclick="return neueZeile();">neues Feld</a>
	<br /><br />
	<input type="submit" name="send" value="Speichern">
</form>

</body>
</html>

Alles was ich vorher schon eingetragen habe, soll er halt behalten und nicht wieder löschen.

Würde mich freuen, wenn jemand eine Idee hat, woran das liegt.

Danke!

Steros · 10. Juli 2013

So, hab da jetzt auch wie ein Weltmeister rumprobiert und bekomme es nicht gelöst.

Es scheint so, als ob das Container Div ("variableFelder") alle Elemente resettet, bzw. neu zeichnet wenn das InnerHTML von ihm geändert wird. Also das Div zeichnet sich komplett neu wenn der Inhalt erweitert wird.

Wie man das umgehen kann, weiß ich auch nicht. Sorry

Janniboy · 10. Juli 2013

schade, dennoch vielen Dank für deine Mühe.

Ich werde mal weiter probieren.

Wenn ich was habe, poste ich es.

Daaron · 10. Juli 2013

Meine erste Idee: Arbeite nicht mit innerHTML. Nimm dir ein Framework wie jQuery oder Mootools und operiere direkt auf dem DOM, z.B. via http://mootools.net/docs/core/Element/Element#Element:inject

sese13 · 10. Juli 2013

Ich konnte es auch nicht herausfinden.

Ich persönlich würde es mit DOM-Elementen machen.

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Inhalte weg bei neuem Feld</title>
<script>
function neueZeile()
{ 
  var variableFelder = document.getElementById('variableFelder');
  var div = document.createElement('div');
  div.setAttribute('id', 'variable' + variableFelder.getElementsByTagName('div').length);
  var select = document.createElement('select');
  select.setAttribute('name', 'test[]');
  select.setAttribute('style', 'width:30%;');
  select.innerHTML = '><option value="1">nummer 1</option><option value="2">nummer 2</option><option value="3">nummer 3</option>';
  div.appendChild(select);
  var input = document.createElement('input');
  input.setAttribute('type', 'text');
  input.setAttribute('name', 'menge[]');
  input.setAttribute('value', '');
  input.setAttribute('maxlength', '2');
  input.setAttribute('style', 'width:20px;text-align:center;');
  input.setAttribute('required', 'required');
  div.appendChild(input);
  variableFelder.appendChild(div);
}
</script>
</head>
 
<body>
 
<form action="" method="post">
	<div id="variableFelder"></div>
	<a href="#" onclick="neueZeile(); return false;">neues Feld</a>
	<br /><br />
	<input type="submit" name="send" value="Speichern">
</form>
 
</body>
</html>

Es funktioniert bei mir. Obs noch einfacher geht weiß ich nicht. Ich mach das meistens mit jQuery

Außerdem hab ich den Link "neues Feld" ein wenig geändert. href hab ich auf # gesetzt und return false; dazugeschrieben.
Das return vor der Funktion hab ich entfernt, da neueZeile() gar nix zurückgibt.

Klappts bei dir so auch?

Gruß,
sese

Steros · 10. Juli 2013

sese13 schrieb:
Ich konnte es auch nicht herausfinden.

Ich persönlich würde es mit DOM-Elementen machen.

...

Gruß,
sese

Schöne Lösung. Geht aber bei mir im IE9 nicht (Dropdown hat keine Werte). In Chrome kein Problem.

Daaron · 10. Juli 2013

Noch ein Grund mehr, ein Framework zu verwenden. Sowohl jQuery als auch Mootools zielen darauf ab, dass der Code auf allen möglichen Browsern geht. Gerade der Microschrott braucht gern mal eine Extrawurst, die man mit den Frameworks umgehen kann.

Janniboy · 10. Juli 2013

@Daaron: Danke aber für diese kleine Sache, lohnt sich aus meiner Sicht ein Framework dafür nicht wirklich.
@sese13: Danke, das funktioniert perfekt. Genau so wollte ich es haben. AppendChild() ist also das Zauberwort um Felder hinzuzufügen. Traumhaft!

Problem wäre damit gelöst, vielen dank euch allen!

Edit: @Steros: Die Anwendung wird nur in einer Praxis verwendet und dort habe ich schon überall den IE10 draufgebügelt. Im IE10 läuft das wunderbar. Von daher ist mir das egal

sianon · 10. Juli 2013

appendChild() ist in diesem Falle aber nur direkt beim Anhängen an den Container mit dem bestehenden Inhalt notwendig, nicht beim Erstellen der Elemente die hinzugefügt werden soll. Macht keinen großen Unterschied, spart aber einige Zeilen und Funktionsaufrufe

Code:

function neueZeile()
{
	var container = document.getElementById('variableFelder'),
		row = document.createElement('div');

	row.setAttribute("id","variabel'" + variableFelder.getElementsByTagName('div').length + "'");

	row.innerHTML = '<select name="test" style="width:10%;"><option value="1">nummer 1</option><option value="2">nummer 2</option><option value="3">nummer 3</option></select> &nbsp; <input type="text" name="menge[]" value="" maxlength="2" style="width:20px;text-align:center;" required>';

	container.appendChild(row);

}

Suche

Neues Input per Javascript löscht Inhalte

Janniboy

Gast

Steros

Lt. Junior Grade

Janniboy

Gast

Daaron

Fleet Admiral

sese13

Ensign

Steros

Lt. Junior Grade

Daaron

Fleet Admiral

Janniboy

Gast

sianon

Lt. Junior Grade

Ähnliche Themen