[JS] Probleme beim dyn. Erweitern von Forms mit AJAX

[faux]

Hallo!

Ich habe folgendes Problem:
Ich habe ein einfaches HTML-Formular:

Code:

<form action="admin_bills.php?mode=dopay" method="post" id="billform">
<div id="fields">
  <fieldset id="bill_1">
    <legend>Rechnung 1</legend>
    <label>Vertragsnummer: <input type="text" name="contract_ids[1]" onchange="contractchanged(this,1)" tabindex="1" /></label>
    <label>Bezahlter Betrag: <input type="text" name="paid_amounts[1]" tabindex="2" /></label><span id="out_1"></span>
</fieldset>


</div>
</form>

Also zwei Felder, und das war es dann auch schon. Der User kann jetzt mit einem Button, noch so ein 2-Felder-Set hinzufügen.
Per AJAX wird dann der HTML-Code angefordert und einfach per document.getElementById('fields').innerHTML += XMLHTTP.responseText; angefügt.
Soweit so gut; es funktioniert auch alles wunderbar. Das Problem ist nur: Wenn man im FF in bereits vorhandene Felder etwas geschrieben hat, werden diese wieder geleert, sobald man eine neue Zeile hinzufügen will.
Im IE funktioniert das allerdings.
Wie kann ich das lösen?

Grüße
Faux

[Valle]

Ganz einfach: Vor dem absenden den inhalt in eine variable speichern, danach per ajax den request schicken und dann die felder mit den in der variable gespeicherten daten füllen Is villeicht nicht grad das beste, aber geht...

[faux]

Naja, dass es so geht, ist klar, aber das kann ja auch nicht die "Lösung" sein, das ist imho eher ein Work-Around. Im IE funktioniert es ja auch ohne Probleme.

Grüße
Faux

Arg: Im FF 2.0 funktioniert Alt+S zum Absenden nicht mehr...

[Christian S.]

Zumindest dazu kann ich was sagen:

Zitat von faux:

Arg: Im FF 2.0 funktioniert Alt+S zum Absenden nicht mehr...

Siehe hier: http://www.delphi-forum.de/topic_ALT...ehr_65883.html

[Flocke]

Zitat von faux:

Per AJAX wird dann der HTML-Code angefordert und einfach per document.getElementById('fields').innerHTML += XMLHTTP.responseText; angefügt.

Da du "innerHTML" neu zuweist, initialisiert FF den gesamten Bereich neu. Mache es einfach mit einem leeren Bereich (jetzt unabhängig von deinem Beispiel):

Code:

... Hier dein eigentliches HTML ...
<div id="append_here"></div>

und beim Update machst du dann

Code:

document.getElementById('append_here').outerHTML = XMLHTTP.responseText + '<div id="append_here"></div>';

Dadurch ersetzt du nur ein leeres Element durch den neuen Inhalt, die alten Formularfelder sollten bestehen bleiben.

[faux]

Hallo!

Da outerHTML meines Wissens nur von IE erkannt wird, habe ich es genau so wie du gelöst, nur mit innerHTML.
Danke sehr!

[Flocke]

Zitat von faux:

... habe ich es genau so wie du gelöst, nur mit innerHTML.

Ich bin neugierig ... zeig's mir

[alcaeus]

Zitat von faux:

Da outerHTML meines Wissens nur von IE erkannt wird, habe ich es genau so wie du gelöst, nur mit innerHTML.

Hihi...du hattest das:

Code:

<div id="append_here"></div>

und fuegst das ein:

Code:

Foobar<div id="append_here"></div>

wenn du outerHTML setzt, hast du am Ende genau das.
Wenn du innerHTML setzt, hast du am Ende:

Code:

<div id="append_here">Foobar<div id="append_here"></div></div>

Greetz
alcaeus

[Flocke]

1. Das ist kein valides HTML mehr (ID darf nur einmal vorkommen)
2. Du kannst so nicht noch einmal was anhängen

[alcaeus]

Zitat von Flocke:

1. Das ist kein valides HTML mehr (ID darf nur einmal vorkommen)
2. Du kannst so nicht noch einmal was anhängen

Wem sagst du das? Mir oder ihm? Ich weiss das schon, genau das hab ich ja erklaert (und zwar nicht dir, sondern ihm)

Dass eine ID nur einmal vorkommen kann, weiss ich auch; und dass man nicht nochmal was anhaengen kann bezweifle ich momentan; iirc gibt getElementById() das erste gefundene Element mit einer bestimmten ID zurueck.
Besides that, die Loesung mit outerHTML ist auch nicht grad besser, mich wuerde interessieren was Safari dazu sagt (der ist etwas zickig wenns um "inoffizielles" JS geht)

Greetz
alcaeus