innerHTML input fields: IE vs FF

SimonV · Feb 22, 2006

Hmm, I let the user add more input fields as needed. But I have a
strange problem with ff (and other mozillas)
When I add a field in ff, the others lost their content...
In IE the content stays
Is there a work-around for this?

this a piece of code to check this out:

<html>
<head>
<script type="text/javascript">
var counter = 0;
function doit(){
counter++;
document.getElementById('content').innerHTML += "<input type=\"text\"
id=\"field"+ counter +"\"/>";
}
</script>
</head>
<body>
<h1 id="header" onClick="doit()">Old header</h1>
<div id="content"><input type="text" id="jupse"/></div>
</body>
</html>

d · Feb 22, 2006

SimonV said:
Hmm, I let the user add more input fields as needed. But I have a
strange problem with ff (and other mozillas)
When I add a field in ff, the others lost their content...
In IE the content stays
Is there a work-around for this?

Have you tried using createElement() and appendChild()? That, to my
knowledge, is the most robust way to add inputs to a page...

dave

RobG · Feb 22, 2006

SimonV said:
Hmm, I let the user add more input fields as needed. But I have a
strange problem with ff (and other mozillas)
When I add a field in ff, the others lost their content...
In IE the content stays

You have discovered one of the differences between the implementation of
innerHTML in IE and Firefox - IE updates the value of the input in the
HTML, Firefox doesn't.

So when you read the innerHTML then write it back out again, IE keeps the
values that have been entered by the user, Firefox puts back the values in
the original source.

Is there a work-around for this?

Use DOM, not innerHTML.

this a piece of code to check this out:

<html>
<head>
<script type="text/javascript">
var counter = 0;
function doit(){
counter++;
document.getElementById('content').innerHTML += "<input type=\"text\"
id=\"field"+ counter +"\"/>";

Replace the line above with:

var div = document.getElementById('content');
var oI = document.getElementById('jupse').cloneNode(true);
oI.id = 'field' + counter;
oI.value = '';
div.appendChild(oI);

}
</script>
</head>
<body>
<h1 id="header" onClick="doit()">Old header</h1>
<div id="content"><input type="text" id="jupse"/></div>

------------------------------------------------^^^

Since you are using HTML, don't use XHTML-style empty element tag closures.

SimonV · Feb 22, 2006

I see, thanks for the replys.
But in fact it's a little more complicated than that...
I set a table with some input fields in it. The cloning isn't the right
solution for this because fields can change
I get the table and its content in a string. The append child doesn't
work with a string...
what now?

SimonV · Feb 22, 2006

Aha, I found a solution thats fine for me:

First I add a div to "jupse" and I give this div an id.
Then I use innerHTML on this new div to insert the string

Only one table shows up with the information	2	Mar 29, 2023
"input-group-text" help	7	Aug 10, 2023
Reversing output of user input by using while loop...	2	Sep 1, 2022
innerHTML forms et FF	1	Sep 23, 2006
Javascript DOM	1	Mar 29, 2023
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023
About as basic "Newbie-Question" that you can get.	3	Sep 4, 2023
How to save JSON Data to a file using fetch() api?	2	Apr 28, 2022

innerHTML input fields: IE vs FF

SimonV

d

RobG

SimonV

SimonV

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads