jQuery new added inputs are not submitted

Question

I have a lot of PHP generated input fields. Once I add new fields with jQuery they are not submitted if they are empty. However the static ones are sent even if they are empty.

How should I fix that ?

CODE:

<form id="sendform" action="pdf.php" method="post">
<input type="text" name="to1" />
<input type="text" name="to2" />
<input type="text" name="to3" />
<input type="submit" value="send" />
</form>

Now jQuery part is:

var clone = $('input[name="to2"]').clone();
$(clone).attr('name', 'to4');
$('#sendform').append(clone);

Screenshots:

You can see that there's Note1, Note2, Note3, Note4. I have added Note2 dynamically. You can see from the screenshot that it is in the dom, however it is not sent(yes, there's data inputted).

SOLUTION In conclusion the problem was in element placed inside the table(<table><form>). When became parent of a table(<form><table>) - everything works fine.

Answer 1

In case someone face same problem again - the reason can be pretty simple: malformed DOM. This may lead to correct visual rendering but will not handle form inputs correctly on submit

If you have f.e.:

[form]
    [div]

    [div]
  [div] <!-- redundant closing div -->
[/form]

Newly appended form fields may not be sent. Check page source in Firefox - red hinted tags may help you

Answer 2

Works fine as expected:

var clone = $('input[name="to2"]').clone();
$(clone).attr('name', 'to4');
$('#sendform').append(clone);

$('#sendform').submit(function() {
    $('div').text($(this).serialize());
    return false;
});​

Live DEMO