For the longest while, I've known that it's possible to create form fields on the fly with JavaScript, say, for the purpose of offering as many file upload fields as a user needs in a form. I could always get the script to work, either with the appendChild() function or by writing to innerHTML. And though posting the dynamic form would work in IE, I could never get the form fields to POST to Firefox. Happily, I've just found out why it didn't work for me while other developers never seemed to mention the problem in their blogs.
It's my coding habits.
The more detailed reason is that because of a quirk of browser style history where form tags caused extra vertical "padding" in a web page, I've always embedded my form tags within table tags:
<table>
<form>
<!-- Table rows and cells -->
</form>
</table>
And the answer to the problem is to take my form tags out from inside the table. Voila! Any dynamic fields created in the form will now be posted correctly in any browser, including Firefox.
<form>
<table>
<!-- Table rows and cells -->
</table>
</form>
So I thought I'd share this in case anyone else shared this same habit. As for the extra whitespace, I'm advised you can just apply CSS to your form tag to get rid of the padding.
Comments (4)
February 7, 2009
5:39AM | #
Of course, this is why you should always validate your HTML - a vital step in the development of any website.
Validating your first bit of code would have told you that a form element is not allowed there.
Plus, you get that great feeling when you get a nice green "valid page" message for every page on your site!
February 25, 2009
2:27AM | #
ya this is the basic things. to test this you don't have to dynamically do it. just do it in simple file.
August 11, 2009
2:43AM | #
just discovered this dynamic fields/Firefox issue. i really wish your fix worked for me, cuz ur right: people don't seem to be discussing this.
September 23, 2009
2:32AM | #
Thanks!
I was wondering why it is happening and was thinking a long long method to sort out this problem but you helped me very much by just reordering two lines. It was good.