Recently I was updated an old HTML form to include some more dynamic JavaScript controls. On the client-side, this would add new fields to the form however when I inspected the resulting post to the server, the dynamically added fields were missing. I think that this might have only been a problem with FireFox but I am not sure about that.
After much debugging, I was able to determine that the problem had to do with how the form was placed inside an HTML table. Back when the form was created, I didn't have much exposure to CSS and in order to prevent the browsers at the time from displaying a extra margin before and after the form, I included the form inside the table tag but outside the first tr tag.
Looking at it now from an XML point of view, this was a terrible thing to do but it did accomplish what I needed it to at the time. Unfortunately, it also proved to be the cause for why my dynamically added fields were not being correctly handled by the form.
Here is an example of the bad code:
<table>
<form action="...">
<tr>
<td>Label 1</td>
<td>
<input value="" type="field1">
</td>
</tr>
</form>
</table>
Here after fixing the code as below, it worked fine:
<form action="...">
<table>
<tr>
<td>Label 1</td>
<td>
<input value="" type="field1">
</td>
</tr>
</table>
</form>
