Marcus: Dynamische Formulare mit createElement und appendChild

Beitrag lesen

Hallo,
ich bin gerade über ein kleines Problem gestolpert und hoffe von jemandem einen geeigneten Tipp zu bekommen.

Ich versuche folgendes:
Bei einem Eingabeformular soll der Nutzer beliebig viele Zeilen mit jeweils 2 Input-Felder zusätzlich hinzufügen können.
Da alles in einer Tabelle angeordert ist mache ich das nach folgendem Schema:

Zunächst wird in der Tabelle mit 'insertRow' eine neue Zeile generiert und anschließend mit 'createElement' die jeweiligen Tabellenfelder generiert. Dann über 'innerHTML' die Input-Felder in die Tabellenfelder geschrieben und zu letzt alles mit Hilfe von 'appendChild' in das 'table'-Objekt eingefügt. Funktioniert soweit auch Prima.

Jetzt tut sich allerdings ein Browserproblem auf - mit dem Internetexplorer funktioniert alles reibungslos, will heißen die Formularfelder "funktionieren" korrekt. Beim Mozilla Firefox sieht die Sache allerdings anders aus: hier werden die neu generierten Zeilen und Felder zwar gleichermaßen angezeigt, beim Absenden des Formulars aber nicht berücksichtigt. Will heißen: die Daten aus den neu generierten Input-Feldern werden NICHT mit übertragen.

Folgende Teillösung des Problems konnte ich bereits erarbeiten:
Wenn ich neu angelegten Input-Felder testweise mit Daten belege und dann mit 'appendChild' nicht im Tabellenfeld einhänge, sondern stattdessen im Formular-Objekt - dann sendet auch der FireFox die Daten korrekt. Allerdings werden die Inputs dann in beiden Browsern nicht mehr angezeigt (und sind somit auch schlecht zu bearbeiten).

Hier noch der Quelltext des Javascripts:

function crow(mytab) {
 if (mytab == "THon") { art = "TECHON"; }
 if (mytab == "TTec") { art = "TECMIET"; }
 f = document.getElementById('TecForm'); // ID des Formulars

t = document.getElementById(mytab);     // ID der Tabelle
 Z = document.getElementById(mytab + 'Count').value;  // Zählt die Anzahl der vorhandenen Tabellenzeilen

TR = t.insertRow(Z);
 document.getElementById(mytab + 'Count').value = parseInt(Z) + 1;

mTD = document.createElement("td");
 mTD.innerHTML = "<b>" + Z + "</b>";
 TR.appendChild(mTD);

mTD2 = document.createElement("td");
 mTD2.innerHTML = "<input id='" + mytab + Z + "titel' name='" + art + Z + "titel' value='hallo' style='width:300px'>";
 TR.appendChild(mTD2);

inp1 = document.getElementById(mytab + Z + "titel");
 f.appendChild(inp1);
// mTD2.appendChild(inp1);

mTD3 = document.createElement("td");
 mTD3.innerHTML = "<input id='" + mytab + Z + "' name='" + art + Z + "betrag' value='' style='width:60px' onBlur='neueSumme(""+ mytab +"");' onKeyUp='checkKomma(""+ mytab + Z + "");'> Euro";
 TR.appendChild(mTD3);

/* inp2 = document.getElementById(art + Z + "betrag");
 f.appendChild(inp2); */

}

Die Count-Variablen nutze ich um mit den Felder anschließend noch arbeiten zu können. (Die Beträge werden automatisch summiert, wenn man Daten eingibt.)

Ich hoffe irgendjemand hat vielleicht eine Idee, wie ich das ganze doch noch Browser-kompatibel hinbekomme.

Gruß, marcus