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

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开发者_JAVA技巧 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

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

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

On some thorough (and boy do I mean thorough) it turned out that the following simple (yet obvious) HTML errors can cause this issue:

1. Badly formed code EG missing etc
2. 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 ;)

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

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