Why aren't my dynamically-added form inputs posting?

Question

I'm working on a form where I need to dynamically add inputs whenever the user clicks a "more widgets" button. There's a hidden div inside the form, and I append the inputs to it with jQuery, like this:

$('div#newwidgetinputs').show().append(newInputs);

They show up, are properly named, etc, but when I post the form, their contents are not in the PHP $_POST array.

So I tried just appending them to the form itself:

$('form#someform').append(newInputs);

They can't be seen on the page, but I give them default values, and this time they do appear in '$_POST'.

This makes me think that div#newwidgetinputs isn't considered part of the form, but I don't see why; it's between the opening and closing <form> tags.

Why wouldn't those inputs post?

Answer 1

If the HTML is not well-formed the browser might consider the dynamic inputs to be outside the form; for example:

<div id="div_1">
<form>
  <div id="div2">
  ... some HTML here
  </div></div>
  ... other HTML here
</form>

The 'other HTML' can be considered outside the form by the browser, since the second </div> closes the '#div_1' div, that is the container of the form, hence after the second </div> the browser consider the form to be closed.

Answer 2

Why not just fill in all the elements and just leave them hidden? have another hidden field that gets set to 1 if the user clicks on add more widgets.