Javascript / Client Side Development :: Dynamic form fields added with appendChild or innerHTML do not POST on submit in Firefox


	Dynamic form fields added with appendChild or innerHTML do not POST on submit in Firefox 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> 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> On May 24, 9:40 am, Derek Basch <dba@yahoo.com> 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