Dynamically added form field not showing up in POSTed data

Go To StackoverFlow.com

1

I'm using jQuery to add a form element. It appears on the page fine, with the correct value, but when I submit the form, the data doesn't show up on the PHP backend. I looked at Firebug's POST data and I don't see it in there either. The javascript I'm using to add the form element is:

$("#projectArray").append("<input type='text' name='data[Project][description]' value='"+projectDescription+"' id='test' />");

Has anyone run across anything like this? I've seem other posts but they seem to be typos and from what I can tell, I don't have any typos in this line.

Edit: As requested, here is the form code. I cut a lot of it out, as it is a pretty large form. If anyone wants the complete code, I can paste it.

<form action="/learningexperiences/add" id="LearningexperienceAddForm" method="post" accept-charset="utf-8">
    <div style="display:none;"><input type="hidden" name="_method" value="POST"/></div>
    <div class="input text"><tr><td><label for="LearningexperienceSubjectarea">Subject Area</label>&nbsp;&nbsp;</td><td><input name="data[Learningexperience][subjectarea]" maxlength="50" type="text" id="LearningexperienceSubjectarea"/></td></tr>
...
    <tr><td>Active</td><td><div class="cbx"><input type="hidden" name="data[Learningexperience][active]" id="LearningexperienceActive_" value="0"/><input type="checkbox" name="data[Learningexperience][active]"  checked="checked" value="1" id="LearningexperienceActive"/></div></td></tr>

    <tr><td colspan="2" style="vertical-align:middle;"><div id="projectArray"></div></td></tr>

...
    <input type="hidden" name="data[Learningexperience][id]" id="LearningexperienceId"/><tr><td colspan="2" style="vertical-align:middle;">&nbsp;</td></tr>

</table>

<table id="buttonsTable">
<tr><td style="text-align:right;"><div style="margin-right:5px;"><div class="submit"><input  name="cancel" type="submit" value="Cancel"/></div></div></td>
<td><div class="submit"><input  type="submit" value="Save Record"/></div></form></td></tr>
</table>

Edit 2: I changed my append tag to append to the form element (#LearningexperienceAddForm). I don't know why, but it started working at that point.

2012-04-05 15:17
by Brett F
can you post your form code - Bot 2012-04-05 15:20
Are you 100% positive that #projectArray is inside the <form></form> tags - DaveRandom 2012-04-05 15:21
Updated to include a trimmed-down version of the form code. #projectArray does exist between the form tags. Good thought though. The form code is generated via CakePHP, if that makes any difference - Brett F 2012-04-05 17:15


2

I changed my append tag to append to the form element (#LearningexperienceAddForm). I don't know why, but it started working at that point.

2012-04-06 13:42
by Brett F


3

came across this while having the same trouble. i'm pretty sure that you need your tags to be on the outside of everything.

something like this:

<form>
<table>

[add as many dynamic fields as you want]

</table>
</form>

for reasons that are way above my pay grade, if those tags are out of order the dynamic fields are not picked up for POSTing...

hope this saves somebody the 2 hours it cost me :-)

2013-04-19 21:02
by rob s
I had the same issue. I did fix html and after that it started working correc - Vyacheslav 2015-01-02 11:32


2

Instead of appending the HTML itself, I'm going to recommend creating the element and then appending it:

var input = document.createElement('input');
input.name = 'data[Project][description]';
input.type = 'text';
input.value = projectDescription;
input.id = 'test';
$('#projectArray').append(input);

This will do a better job of inserting it into the DOM for access.

Let me know if this works out for you.

2012-04-05 15:51
by Nick Beranek
While I agree that this is the better way of creating elements, the end result is the same, and the difference in approach to creating the element can't be the reason it isn't showing up in post data. I would tend to agree with @DaveRandom -- it is most likely not being appended with form tags - Chris Baker 2012-04-05 15:54
Not relevant to the question. Broadly true, though not always - NoName 2012-04-05 15:59
Point taken. Or rather, negative point taken - Nick Beranek 2012-04-05 16:07
+1 to offset the -1 : - Chris Baker 2012-04-05 16:17
I tried this code, but to no avail. I also tried another method I found, using jQuery, to basically do the same thing and it also did not work - Brett F 2012-04-05 19:11
@Chris - if it makes you feel better to level the score, that's fine. The fact of the matter is that what you posted was not relevant to the question at hand. SO relies on a system of grading so users can see what is and isn't the best route to discovering the answer to a question. Whilst you clearly felt an afront, I would reiterate that your post wasn't relevant to the question. Presumably, on re-reading it, you would not contend otherwise - NoName 2012-04-06 20:52
@Mitya First off, this is not my answer; you appear to be confused. Second of all, I don't need you to teach me what this site is and is not for. If you have so much faith in the voting system, you surely must have noticed that I have garnered more votes than you... doesn't that mean, by your own standard, that you should be following MY lead rather than lecturing me?

I voted up for my own reasons, and I don't have to justify them to you. In turn, it isn't your place to question me about my motives. Go ahead and vote how you like, I won't question it. Thanks - Chris Baker 2012-04-06 20:59



0

For anyone who has had this issue just make sure that your closing form tag encloses the appended data. I had one too many closing divs in my form which Google Chrome replaced in as a closing tag, so watch out for this.

2015-09-17 23:28
by John


0

Kindly check all html element tags I mean opening(<...>) and closing tag() between the form. All should me in managed way.

2015-10-05 07:41
by kumardippu
Ads