innerHTML not working in Firefox

W

webdev

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>
 
M

Martin Honnen

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.
Click to expand...

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.
 
W

webdev

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.
Click to expand...

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

Regards
Rae MacLeman
 
F

Fred Oz

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>
Click to expand...

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>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Script to send email not working 1
Slideshow not working properly 2
Image upload not working in browser 4
JavaScript code not working!! 6
Border attribute not working 1
Script working in Firefox but not Chrome and Safari 3
Justify-content not working 1
I dont get this. Please help me!! 2

Members online

Total: 42 (members: 1, guests: 41)
Robots: 446

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,054
Latest member
TrimKetoBoost

Latest Threads

Top