✔ Formulareingabe bei Erweiterung übernehmen

K

Kimama

Grünschnabel
Hallo zusammen,

ich habe nun schon einige Stunden mit der Suche nach der Lösung des Problems zugebracht und komme nicht weiter. Meine JS-Kenntnisse sind beschränkt und ich kämpfe regelmäßig damit.

Das Problem ist:
Ich habe ein Formular, dass ich dynamisch erweitern möchte. Bisher habe ich dafür folgenden Code verwendet:

Code: 
var NeuDrei = "<br><input type=\'text\' name=\'formel[]\' value=\'\' size=\'100\'>";
			
function Mehr3 () {
	document.getElementById(\'eingabe3\').innerHTML += NeuDrei;
}

Nun habe ich aber das Problem, dass ich eins auf den Deckel bekommen habe, weil sich die Eingaben löschen, wenn man ein neues Feld hinzufügt. Sprich: Ich lasse mir zwei Felder geben, fülle sie aus und merke dann, dass ich ein drittes Feld brauche. Wenn ich nun die Funktion "Mehr3()" aufrufe, werden die Eingaben aus den ersten beiden Feldern gelöscht. Wie kann man das verhindern? (PHP scheidet leider aus, da die eigentliche PHP-Funktion schon über 1200 Zeilen lang ist und ich dem Benutzer nicht diese Laufzeit für ein einziges Feld zumuten möchte...)

Für hilfreiche Tipps wäre ich euch super dankbar!

Liebe Grüße
Vera
 
Erzeuge das neue Element per createElement() und füge es z.B. per appendChild() ein.

Warum sich die Eingaben löschen? Du fügst nicht nur etwas hinzu, wie man denken könnte, du schreibst das komplette Formular neu, denn diese Anweisung:
Code: 
document.getElementById(\'eingabe3\').innerHTML += NeuDrei;
....würde voll ausgeschrieben so aussehen:
Code: 
document.getElementById(\'eingabe3\').innerHTML = document.getElementById(\'eingabe3\').innerHTML + NeuDrei;
Da jedoch die vom User erfolgten Eingaben nicht in der innerHTML-Eigenschaft enthalten sind, gehen sie verloren.

Bei der vorgeschlagenen Methode hast du das Problem nicht, da der bisherige Inhalt unangetastet bleibt.
 
Danke für die Erklärung zu innerHTML. Dann ist ja klar, warum das nicht funktioniert.

Ich habe mir gerade mal ein paar Sachen zu createElement(). Allerdings habe ich da noch eine Frage *schäm*.

Die Beispiele, die ich gefunden habe, waren immer nur mit einem Tag (beispielsweise h1). Nun muss ich aber teils bis zu 15 Tags (verschiedene Inputs, Zeilenumbrüche etc.) mit einem Klick hinzufügen. Wie macht man das denn mit createElement?
 
Mit 15 machst du das genau wie mit einem, halt nach und nach...ist schon ein wenig Schreibarbeit :-)


Eine Möglichkeit, die dir diese Arbeit erspart:
Erzeuge per createElement() ein Element, z.B. ein <div>
dessen innerHTML weist du das benötigte zu und sodann hängst du dieses Element per appendChild() an der gewünschten Stelle ein:
So bleibt das ursprüngliche Element unberührt, und du kannst trotzdem bequem mit innerHTML arbeiten.

ca. so:
Code: 
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
var NeuDrei = "<br><input type='text' name='formel[]'  size='100'>";
			
function Mehr3 () 
{
  dummy=document.createElement('span');
  dummy.innerHTML=NeuDrei;
	document.getElementById('eingabe3').appendChild(dummy);
}
//-->
</script>

</head>
<body>
<form id="eingabe3">
<input type="button" onclick="Mehr3()" value="mehr"><br>
<input type='text' name='formel[]' size='100'>
</form>
</body>
</html>
 
Super, vielen Dank für deine Hilfe! :)

Ich hatte ernsthaft schon die Befürchtung, nun ewig lange JS-Sachen schreiben zu müssen... *erleichtert bin*
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück