innerHTML not working in Firefox

Discussion in 'Javascript' started by webdev, Oct 3, 2004.

  1. webdev

    webdev Guest

    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
     
    webdev, Oct 3, 2004
    #1
    1. Advertising

  2. 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/
     
    Martin Honnen, Oct 3, 2004
    #2
    1. Advertising

  3. webdev

    webdev Guest

    "Martin Honnen" <> wrote in message
    news:415fd460$0$3625$-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
     
    webdev, Oct 3, 2004
    #3
  4. webdev

    Fred Oz Guest

    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>
     
    Fred Oz, Oct 3, 2004
    #4
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. catorcio

    innerHTML not good in Firefox?

    catorcio, May 14, 2005, in forum: Javascript
    Replies:
    11
    Views:
    201
    Richard Cornford
    May 15, 2005
  2. McKirahan
    Replies:
    8
    Views:
    177
    McKirahan
    Oct 12, 2005
  3. sonic
    Replies:
    5
    Views:
    294
    Randy Webb
    Jul 11, 2006
  4. Derek Basch
    Replies:
    1
    Views:
    129
  5. Derek Basch
    Replies:
    0
    Views:
    161
    Derek Basch
    May 24, 2007
Loading...

Share This Page