Not showing DIV updated contents in Firefox

Mahernoz · Dec 14, 2007

Task to be Accomplished: I want to copy the contents of dvAArea (after
i change a value in the dropdown or a textbox) into the new dvBArea

Problem: In Internet explorer this code works fine but Firefox gives
the unchanged content of dvAArea (and not the current content). I want
the current content of dvAArea in Firefox after i change the values in
the dropdown or text fields.

//My Page is as follows
//I am having 2 div
<div id="dvBArea"></div>
<div id="dvAArea">
<table>
<tr>
<td>
<input id="txtA0101" name="txtA0101" type="text"></td>

<td>
<input id="txtA0102" name="txtA0102" type="text"></td>

<td>
<select id="sel0106" name="sel0106">
<option value="300">300</option>
<option value="600">600</option>
<option selected="selected" value="1200">1200</
option>
<option value="2400">2400</option>
</select>
</td>
</tr>
</table>
</div>

//and a JavaScript function CopyHTML which is raised on onclick event
of a button
<input id="btnClickMe" type="button" value="Copy"
onclick="CopyHTML()"/>

//the CopyHTML function is as follows
<script language="javascript" type="text/javascript">
function CopyHTML()
{

document.getElementById('dvBArea').innerHTML =
document.getElementById('dvAArea').innerHTML;
}

</script>

Regards,
Mahernoz

Doug Gunnoe · Dec 14, 2007

Task to be Accomplished: I want to copy the contents of dvAArea (after
i change a value in the dropdown or a textbox) into the new dvBArea

Problem: In Internet explorer this code works fine but Firefox gives
the unchanged content of dvAArea (and not the current content). I want
the current content of dvAArea in Firefox after i change the values in
the dropdown or text fields.

//My Page is as follows
//I am having 2 div
<div id="dvBArea"></div>
<div id="dvAArea">
<table>
<tr>
<td>
<input id="txtA0101" name="txtA0101" type="text"></td>

<td>
<input id="txtA0102" name="txtA0102" type="text"></td>

<td>
<select id="sel0106" name="sel0106">
<option value="300">300</option>
<option value="600">600</option>
<option selected="selected" value="1200">1200</
option>
<option value="2400">2400</option>
</select>
</td>
</tr>
</table>
</div>

//and a JavaScript function CopyHTML which is raised on onclick event
of a button
<input id="btnClickMe" type="button" value="Copy"
onclick="CopyHTML()"/>

//the CopyHTML function is as follows
<script language="javascript" type="text/javascript">
function CopyHTML()
{

document.getElementById('dvBArea').innerHTML =
document.getElementById('dvAArea').innerHTML;
}

</script>

Regards,
Mahernoz

I investigated this a bit. It is an interesting question.

At first, I thought maybe this was a problem with innerHTML and
firefox, but no.

The following works when changing the innerHTML and then calling the
CopyHTML function.

<html>
<head>
<script>
function changeStuff(){
document.getElementById('div2').innerHTML = "Mary had a little lamb
who ate ivy";
}
function CopyHTML() {
document.getElementById('div1').innerHTML =
document.getElementById('div2').innerHTML;
}

</script>
</head>
<body>
DIV1
<div id="div1" style="border-style:solid;width:100;height:100;">
</div>
DIV2
<div id="div2" style="border-style:solid;width:100;height:100;">Mares
eat oats and does eat oats and little lambs eat ivy
</div>

<input type="button" value="Click this first" onclick="changeStuff()" /
<input type="button" value="Click this next" onclick="CopyHTML()" />

</body>

</html>

However, as is the case with your form, it does not seem to track the
form values in the div's innerHTML attribute. But the innerHTML value
is really not changing, so I can see why firefox handles it the way it
does.

I see one other problem here. When you copy the inputs from one div to
another, you are creating multiple elements with the same id.

I have some ideas how to work around this, but I'm not sure what you
are trying to do, so I'm not sure what would be appropriate.

Script to send email not working	1	Apr 10, 2023
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript?	0	May 1, 2023
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
Set value after clicking in field	11	May 9, 2023
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023
Jquery not triggering / acting as expected.	0	Mar 6, 2022
How to add dropdown selected data to table using jquery	2	Jul 2, 2022
Javascript DOM	1	Mar 29, 2023

Not showing DIV updated contents in Firefox

Mahernoz

Doug Gunnoe

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads