innerHTML not working in Firefox

webdev · Oct 3, 2004

Hi,

I'm writing an extensible form - it contains one name field to start and an
"Add another name" button, so you can add as many bnames as required and
then submit the form. Sounds simple and I have it working in IE5.5, but it
doesn't retain the data input to the form when run in Firefox. can anyone
please point me in the right direction? Code shown below...

Thanks in advance
Rae MacLeman

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Test Form</title>
<script language="JavaScript" type="text/javascript">
gCount = 1;
function addName(){
var el;
gCount++;
el = document.getElementById("myDiv");
el.innerHTML = el.innerHTML + "Enter Name : <input type='text'
name='fld"+gCount+"' id='fld" + gCount+"' size='10'><br>"
}
</script>
</head>

<body>
<form name="testform" id="testform">
<div id="myDiv">
Enter Name : <input type="text" name="fld1" id="fld1" size="10"><br>
</div>
</form>
<a href="javascript:addName();">Add another name field</a>
</body>
</html>

Martin Honnen · Oct 3, 2004

webdev said:
I'm writing an extensible form - it contains one name field to start and an
"Add another name" button, so you can add as many bnames as required and
then submit the form. Sounds simple and I have it working in IE5.5, but it
doesn't retain the data input to the form when run in Firefox.

There are better ways doing this, use the W3C DOM API to create a new input
var input = document.createElement('input');
input.type = 'text';
input.name = 'inputName';
then to insert it where necessary e.g.
divReference.appendChild(input);
That should work with IE 5+, Netscape 6/7, Mozilla 1.x, Firefox, Opera 7
and doesn't cause the browser to reparse HTML that has already been
parsed into a DOM tree.

webdev · Oct 3, 2004

Martin Honnen said:
There are better ways doing this, use the W3C DOM API to create a new input
var input = document.createElement('input');
input.type = 'text';
input.name = 'inputName';
then to insert it where necessary e.g.
divReference.appendChild(input);
That should work with IE 5+, Netscape 6/7, Mozilla 1.x, Firefox, Opera 7
and doesn't cause the browser to reparse HTML that has already been
parsed into a DOM tree.

Thank you, Martin - that makes lots of sense, and I now have it working.

Regards
Rae MacLeman

Fred Oz · Oct 3, 2004

webdev said:
Hi,

I'm writing an extensible form - it contains one name field to start and an
"Add another name" button, so you can add as many bnames as required and
then submit the form. Sounds simple and I have it working in IE5.5, but it
doesn't retain the data input to the form when run in Firefox. can anyone
please point me in the right direction? Code shown below...

Thanks in advance
Rae MacLeman

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Test Form</title>
<script language="JavaScript" type="text/javascript">
gCount = 1;
function addName(){
var el;
gCount++;
el = document.getElementById("myDiv");
el.innerHTML = el.innerHTML + "Enter Name : <input type='text'
name='fld"+gCount+"' id='fld" + gCount+"' size='10'><br>"
}
</script>
</head>

<body>
<form name="testform" id="testform">
<div id="myDiv">
Enter Name : <input type="text" name="fld1" id="fld1" size="10"><br>
</div>
</form>
<a href="javascript:addName();">Add another name field</a>
</body>
</html>

The following works for me. The advantage of using cloneNode is that
you can put whatever you like in the <div> that gets cloned.

<html>
<head><title>Test Form</title>

<script type="text/javascript">
var gCount = 1;
function addName(theForm) {
gCount++;
var oldEl = document.getElementById("fred");
var newEl = oldEl.cloneNode(true);
theForm.insertBefore(newEl,oldEl.nextSibling);
}
</script>
</head>

<body>

<form name="testform" id="testform" action="">
<div id="fred">Enter Name :
<input type="text" name="fld1" id="fld1"
size="10"><br>
</div>
<input type="button" name="fred" value="Add a Name"
onclick="addName(this.form);"><br>
<input type="submit" value="submit">
</form>

</body>
</html>

Script to send email not working	1	Apr 10, 2023
Slideshow not working properly	2	Jan 7, 2023
Image upload not working in browser	4	Sep 9, 2022
JavaScript code not working!!	6	Jun 13, 2023
Border attribute not working	1	Sep 3, 2018
Script working in Firefox but not Chrome and Safari	3	Apr 6, 2021
Justify-content not working	1	Mar 29, 2021
I dont get this. Please help me!!	2	Jan 24, 2023

innerHTML not working in Firefox

webdev

Martin Honnen

webdev

Fred Oz

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads