Dynamic form fields added with appendChild or innerHTML do not POST on submit in Firefox

Discussion in 'Javascript' started by Derek Basch, May 24, 2007.

  1. Derek Basch

    Derek Basch Guest

    I spent several hours struggling with dynamic form fields added with
    appendChild or innerHTML not POSTing on submit in Firefox. The only
    way I found to make it work is to append any created fields to a DIV
    within the form. Here is an example I store from another post. I hope
    this helps someone.

    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;
    charset=ISO-8859-1">
    <title>creating input elements dynamically</title>
    <script type="text/javascript">
    function addInput () {
    var div;
    if (document.getElementById) {
    div = document.getElementById('hiddenList');
    var input;
    if (document.createElement && (input =
    document.createElement('input'))) {
    input.type = 'hidden';
    input.name = 'currentDate';
    input.defaultValue = input.value = new Date().toString();
    div.appendChild(input);
    }
    }
    }

    function showQueryString () {
    document.write('<p>location.search: ' + location.search + '<\/p>\r
    \n');
    }

    </script>

    </head>
    <body>
    <script type="text/javascript">
    showQueryString();
    </script>

    <form name="form1" action="test.php">
    <div id="hiddenList"></div>

    <input type="submit" onClick="addInput()">
    </form>

    </body>
    </html>
     
    Derek Basch, May 24, 2007
    #1
    1. Advertising

  2. Derek Basch

    RobG Guest

    On May 24, 9:40 am, Derek Basch <> wrote:
    > I spent several hours struggling with dynamic form fields added with
    > appendChild or innerHTML not POSTing on submit in Firefox. The only
    > way I found to make it work is to append any created fields to a DIV
    > within the form. Here is an example I store from another post. I hope
    > this helps someone.


    I don't know what your problem was since you didn't post the non-
    working code, I suspect it was as a result of putting DOM-altering
    code in an onclick handler on the submit button - use the form's
    onsubmit event instead.

    In any case, your code works fine even if you remove the div and
    append the input to the form from the submit button's click event.
    For the record, to be valid HTML a form must have a block element
    inside it enclosing all the form controls, like:

    <form ... >
    <div>
    <!-- the rest of the form -->
    </div>
    </form>


    The div can be replaced with a p or table element, or any block
    element.

    <URL: http://www.w3.org/TR/html401/interact/forms.html#edef-FORM >


    [...]
    > <form name="form1" action="test.php">
    > <div id="hiddenList"></div>
    >
    > <input type="submit" onClick="addInput()">


    It's not a good idea to combine a submit button with an onclick event,
    use the form's onsubmit handler instead.


    --
    Rob
     
    RobG, May 24, 2007
    #2
    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. Nicolas Van Lancker

    innerHTML / Appendchild question

    Nicolas Van Lancker, May 7, 2004, in forum: Javascript
    Replies:
    1
    Views:
    124
    Richard Cornford
    May 7, 2004
  2. Replies:
    14
    Views:
    259
    Richard Cornford
    Nov 7, 2005
  3. sonic
    Replies:
    5
    Views:
    309
    Randy Webb
    Jul 11, 2006
  4. Derek Basch
    Replies:
    0
    Views:
    178
    Derek Basch
    May 24, 2007
  5. Mitchell Fisher

    Form Submit Dynamic URL, Leave Fields Off

    Mitchell Fisher, May 27, 2007, in forum: Javascript
    Replies:
    0
    Views:
    161
    Mitchell Fisher
    May 27, 2007
Loading...

Share This Page