Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > innerHTML not working in Firefox

Reply
Thread Tools

innerHTML not working in Firefox

 
 
webdev
Guest
Posts: n/a
 
      10-03-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>


---
Outgoing mail is certified Virus Free.
Checked by AVG anti-virus system (http://www.grisoft.com).
Version: 6.0.772 / Virus Database: 519 - Release Date: 10/1/04




 
Reply With Quote
 
 
 
 
Martin Honnen
Guest
Posts: n/a
 
      10-03-2004


webdev wrote:

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

--

Martin Honnen
http://JavaScript.FAQTs.com/
 
Reply With Quote
 
 
 
 
webdev
Guest
Posts: n/a
 
      10-03-2004

"Martin Honnen" <(E-Mail Removed)> wrote in message
news:415fd460$0$3625$(E-Mail Removed)-online.net...
>
>
> webdev wrote:
>
> > 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.
>
> --
>
> Martin Honnen
> http://JavaScript.FAQTs.com/


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

Regards
Rae MacLeman



---
Outgoing mail is certified Virus Free.
Checked by AVG anti-virus system (http://www.grisoft.com).
Version: 6.0.772 / Virus Database: 519 - Release Date: 10/1/04


 
Reply With Quote
 
Fred Oz
Guest
Posts: n/a
 
      10-03-2004
webdev wrote:
> 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>
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Dynamic form fields added with appendChild or innerHTML do not POST on submit in Firefox Derek Basch Javascript 1 05-24-2007 02:59 AM
Dynamic form fields added with appendChild or innerHTML do not POST on submit in Firefox Derek Basch Javascript 0 05-23-2007 11:40 PM
xhtml, innerHtml, appendChild, and innerHTML. what is the exact proper way to do this with DOM sonic Javascript 5 07-11-2006 08:17 AM
Firefox does not reflect selected option via innerHTML McKirahan Javascript 8 10-12-2005 07:43 PM
innerHTML not good in Firefox? catorcio Javascript 11 05-15-2005 07:26 PM



Advertisments