nicht angemeldet
2 DIVs mit Formularinhalten per JS austauschen
Nachdem sich bei meinem ersten Versuch offenbar niemand angesprochen fühlte ;-) - hier nochmal meine Frage von vor einer Woche:
ich habe folgendes Problem:
Ich möchte zwei DIVs mit JavaScript gegeneinander austauschen.
Beide DIVs enthalten Formular-Elemente.
Wenn ich versuche, die Inhalte der beiden DIVs gegeneinander auszutauschen, funktioniert dies zwar, aber die Formularinhalte gehen dabei teilweise oder ganz verloren.
Ich habe einen Beispiel-Code beigefügt, der dies hoffentlich verdeutlicht.
Bitte wie folgt vorgehen:
1. Seite in Mozilla (1.5) öffnen
2. bei div 1 selectbox auf "2" stellen und einen text in das input field eintragen.
3. Switch (cloneNode) drücken.
=> Der Selectbox-Inhalt wurde beim austauschen auf "1" zurückgesetzt. der input field-inhalt wurde wie erwartet ausgetauscht.
Weiter:
1. Seite in Mozilla (1.5) öffnen
2. bei div 1 selectbox auf "2" stellen und einen text in das input field eintragen.
3. Switch (innerHTML) drücken.
=> div 1 und div 2 wurden zwar vertauscht, aber die änderungen bei selectbox und input field sind verloren gegangen
Weiter:
Jetzt das ganze in IE (zum beispiel 6.0) öffnen.
=> bei Switch (cloneNode) verhält sich der IE genauso wie der Mozilla: Der input field inhalt wird ausgetauscht, der selectbox-inhalt dagegen geht verloren.
=> bei Switch (innerHTML) wird der Inhalt wie erwartet komplett ausgetauscht.
Frage:
Wie bekomme ich es hin, dass beide Browser die DIVS komplett, inklusive der Inhalte der Formular-Elemente austauschen, so wie es beim IE mit innerHTML (letzter testfall) funktioniert?
Hinweis:
Wahrscheinlich wird der Vorschlag kommen, den Inhalt der Formularelemente einzeln gegeneinander auszutauschen. Aber das geht leider nicht, da sich die Anzahl und Art der Formularelemente in dem von mir benötigten Fall leider unterscheiden. So kann es sein, dass sich im Div 1 zwei Input-Felder und im Div 2 drei Selectboxen befinden.
Hier der Code:
<html><head><title>Swich</title></head>
<body>
<form action="bla.htm">
<div id="k_1">div 1<br><select><option>1<option>2</select><input type="text" name="i1" value=""></div>
<div id="k_2">div 2<br><select><option>1<option>2</select><input type="text" name="i2" value=""></div>
</form>
<script language="JavaScript">
<!--
function switchCloneNode() {
k1 = document.getElementById('k_1');
k2 = document.getElementById('k_2');
html1 = k1.cloneNode(true);
html2 = k2.cloneNode(true);
k2.parentNode.replaceChild(html1,k2);
k1.parentNode.replaceChild(html2,k1);
}
function switchInnerHTML() {
k1 = document.getElementById('k_1');
k2 = document.getElementById('k_2');
html1 = k1.innerHTML;
html2 = k2.innerHTML;
k1.innerHTML = html2;
k2.innerHTML = html1;
}
//-->
</script>
<input type="button" value="Switch (cloneNode)" onClick="switchCloneNode();">
<input type="button" value="Switch (innerHTML)" onClick="switchInnerHTML();">
</body>
</html>
-
Hallo Manfred.
Wie bekomme ich es hin, dass beide Browser die DIVS komplett, inklusive der Inhalte der Formular-Elemente austauschen, so wie es beim IE mit innerHTML (letzter testfall) funktioniert?
Ich schätze, dass dies gar nicht möglich ist. Ich habe eine kürzere Version deines Scriptes verfasst und sie sowohl mit Firefox, Opera, Konqueror als auch mit IE getestet.
Einzig und allein Opera übernimmt immer korrekt alle modifizierten Werte, aktivierten Checkboxen und ausgewählte Optionen. Alle anderen scheitern daran.
Einen schönen Freitag noch.
Gruß, Ashura
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
mathbr:del.icio.us/ mathbr:w00t/