InnerHTML leert Form-Felder

[Stanlay]

Hi liebe Gemeinde,

ich hoffe, dass Ihr mir bei meinem kleinen Problem behilflich sein könnt. Habe jetzt schon zahlreiche Seiten durchstöbert und gelesen aber irgendwie keine wirkliche Lösung gefunden.

Ich habe folgendes Problem:

Ich habe ein Formular. Über einen Button lasse ich via JS eine neue Zeile einfügen, die ebenfalls verschiedene Input- und Select-Felder beinhaltet. Nun musste ich aber feststellen, dass wenn ich in der ersten Zeile in irgendein Feld etwas eintrage und dann auf "Neues Feld hinzufügen" klicke, sämtliche gemachten Angaben verschwinden. Hmm.. ich habe keine Ahnung woran das liegen kann.

Liegt es vielleicht am innerHTML, sollte ich etwas anderes verwenden? Hier einmal der bisherige Quellcode zum einfügen der neuen Zeile

  
function add_row() {  
  
	var list	= build_options();  
	var cnt		= parseInt(document.getElementById("row_cnt").value);  
	var new_id	= (cnt + 1);  
  
var chg_gewinn = '<select name="leistung['+new_id+'][chg_gewinn]" id="chg_gewinn['+new_id+']" onchange="javascript: show_gewinn(\''+new_id+'\');"><option value="0">Nein</option><option value="1">Ja</option></select><span id="gewinn_row_'+new_id+'" style="display: none;"><input name="leistung['+new_id+'][gewinn]" type="text" size="5" value="40" /> %</span>';  
var inkl_reinigung	= '<select name="leistung['+new_id+'][inkl_reinigung]" id="inkl_reinigung"><option value="0">Nein</option><option value="1">Ja</option></select>';  
var alter_pos	= '<select name="leistung['+new_id+'][alter_pos]" id="alter_pos"><option value="0">Nein</option><option value="1">Ja</option></select>';  
var flaeche		= '<input name="leistung['+new_id+'][flaeche]" type="text" id="flaeche" value="m²" size="10" />';  
  
var leistung	= '<select name="leistung['+new_id+'][oberflaeche]" id="oberflaeche"><option></option>'+list+'</select>';  
  
	// content = document.getElementById('calc_elements').innerHTML;  
	document.getElementById('calc_elements').innerHTML += '<div id="row_'+new_id+'">' + leistung + ' ' + chg_gewinn + ' ' + inkl_reinigung + ' ' + alter_pos + ' ' + flaeche + ' ' + '<a href="javascript: add_row();"><img src="images/add_row.png" border="0" /></a> <a href="javascript: del_row(\''+new_id+'\');"><img src="images/del_row.png" border="0" /></a><br /></div>';  
	  
	document.getElementById("row_cnt").value = new_id;	  
  
}  

Ich würde mich freuen wenn ihr mir hier kurz helfen könntet..

Danke vorab

Stanlay

[Stanlay]

So, hat sich erledigt.. habe jetzt noch eben schnell rumprobiert und getestet und dann auch folgende Lösung gefunden:

        var t1	= document.getElementById("calc_elements");  
        var d	= document.createElement("div");  
        d.id	= "row_"+new_id;  
  
        d.innerHTML = leistung + ' ' + chg_gewinn + ' ' + inkl_reinigung + ' ' + alter_pos + ' ' + flaeche + ' ' + '<a href="javascript: add_row();"><img src="images/add_row.png" border="0" /></a> <a href="javascript: del_row(\''+new_id+'\');"><img src="images/del_row.png" border="0" /></a><br />';  
  
        t1.appendChild(d);

Besten Dank und viele Grüße

Stanlay