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

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

score 1 · Answer 1 · edited May 23 '17 at 12:00

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

edited May 23 '17 at 12:00

Community

1
1

answered Feb 24 '11 at 09:52

xkeshav

53,360
44
177
245

Hmm it appears that this is just a "feature" of the way DOM is handled in Firefox and Chrome? I've scoured StackOverflow and the web with absolutely no clues as to how to resolve this. The way I'm looking to resolve this for my project is to stop relying on AJAX, and instead use on-page JQuery script to perform the new line insertions. – MrFidge Feb 24 '11 at 13:01
1

It's a shame though - this (apparently) is a limitation on the uses of AJAX. I'm really suprised more people haven't raised this as an issue or blogged about it. – MrFidge Feb 24 '11 at 14:21

score 0 · Answer 2 · edited Oct 21 '12 at 13:21

0

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

edited Oct 21 '12 at 13:21

answered May 22 '12 at 09:32

primehalo

859
1
14
26

score 0 · Answer 3 · answered Jan 26 '15 at 16:19

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

score 0 · Answer 4 · answered Feb 23 '11 at 18:30

0

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

answered Feb 23 '11 at 18:30

artbristol

32,010
5
70
103

Oh sorry, no that's just bad example code - I had to chop loads of stuff out before I posted it here! I've amended that ;) – MrFidge Feb 24 '11 at 09:44

score 0 · Answer 5 · answered Mar 02 '11 at 17:10

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 ;)

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

5 Answers5