By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,838 Members | 1,675 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,838 IT Pros & Developers. It's quick & easy.

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

P: n/a
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>

May 23 '07 #1
Share this Question
Share on Google+
1 Reply


P: n/a
On May 24, 9:40 am, Derek Basch <dba...@yahoo.comwrote:
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/interac...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

May 24 '07 #2

This discussion thread is closed

Replies have been disabled for this discussion.