Form fields added via AJAX fail to load into the $_POST array - ajax

Question

I've got a plain and simple HTML form which allows people to order some brochures. The form first loads with something looking a little like this:
<script type="text/javascript">
var tableRowN = 1;
</script>
<form id="Order" name="Order" method="post" action="includes/orderCheck.php">
<input id="name" type="text" name="name" width="100" />
<table id="orderingTable">
<tr class="lastRow">
<td><div id="itemGroupdiv1">
<input type="text" class="disabled" name="itemGroup1" id="itemGroup1" />
</div></td>
<td><div id="itemCodediv1">
<input type="text" name="itemCode1" id="itemCode1" class="disabled" />
</div></td>
<td><div id="itemCodeVersiondiv1">
<input type="text" class="disabledSmall" id="itemcodeversion1" name="itemcodeversion1" />
</div></td>
</tr>
</table>
<input type="submit" name="submit" id="submit"/>
</form>
Then when the user wants to add a new line to the table he can click a button which fires the following javascript function to grab the new table code via AJAX and insert it.
function createItemLine() {
tableRowN++;
$('tr.lastRow').attr('class', '');
$('#orderingTable').append('<tr class="lastRow"></tr>');
$.ajax({
url: "/orderingTable.php?rNumber=" + tableRowN,
cache: false,
success: function(html){
$("tr.lastRow").append(html);
alert('loaded');
}
});
}
The AJAX function then runs off to a PHP script which creates the next line, rolling the IDs and Names etc with +1 to the number.
<td><div id="itemGroupdiv2">
<input type="text" class="disabled" name="itemGroup2" id="itemGroup2" />
</div></td>
<td><div id="itemCodediv2">
<input type="text" name="itemCode2" id="itemCode2" class="disabled" />
</div></td>
<td><div id="itemCodeVersiondiv2">
<input type="text" class="disabledSmall" id="itemcodeversion2" name="itemcodeversion2" />
</div></td>
So so far, nothing suprising? Should all be pretty straight forward...
The problem is that when I add new lines (In Firefox and Chrome) the new lines are completely ignored by the form submission process, and they never get passed through into the $_POST array.
Is this a known problem? I've not come across this before...
Thanks for any pointers,
H

Answer 1

use jQuery.trim(data) but this is not pretty sure because can affect the
content of your data. or see this one may help u

Answer 2

Is your table missing an html id? The jQuery selector $('#orderingTable') is looking for something with id="orderingTable"

Answer 3

On some thorough (and boy do I mean thorough) it turned out that the following simple (yet obvious) HTML errors can cause this issue:
Badly formed code EG missing etc
Duplicate or missing form "name" attributes
On creating properly validated HTML, the form submitted and all values were passed correctly into the _POST array. An object lesson in making sure your developers pay attention to the basics before trying to get all fancy in their coding approach ;)

Answer 4

I've found that using .html() to insert the content instead of .append() or .prepend() causes the inserted form fields to work as expected.

Answer 5

I've just spent quite a while laboring over a problem like this.
I was ajax-ing an input field into a form and that input field was not showing up in the $_POST submission array, was completely annoying!!!! Aaaaanyway, I fixed it by just checking over all my html and it turns out that my form 'open' was inside one of the main div's on page and not outside.
thus:
<div>
<form>
<input type="text" name="input_field">
</div>
</form>
is now fixed to be:
<form>
<div>
<input type="text" name="input_field">
</div>
</form>
Silly, I know, but in a massive form, it was tricky to spot! So in short just be tidy with your html and it WILL work, I hope that helps someone somewhere :-)
M