CODEWITHSUNDEEP
phpjavascriptjquery
Brett F
Brett F

Reputation: 414

Dynamically added form field not showing up in POSTed data

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.

Upvotes: 3

Views: 6288

Answers (6)

JDandChips
JDandChips

Reputation: 10100

I've found while cloning some input fields from what was intended as a "template" for the purpose of reproducing a field set, which was written by someone else, that those inputs weren't appearing in my form data. After a lot of head scratching it turned out that the input fields had the disabled attribute on them, which once removed from my cloned copy were then correctly included in the form submission.

I guess the other developer did this because they didn't want the template to be submitted with the form data as it appeared within the form tags.

Upvotes: 0

kumardippu
kumardippu

Reputation: 617

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

Upvotes: 0

John
John

Reputation: 196

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.

Upvotes: 1

rob s
rob s

Reputation: 101

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

Upvotes: 5

Brett F
Brett F

Reputation: 414

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

Upvotes: 2

Nick Beranek
Nick Beranek

Reputation: 2751

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.

Upvotes: 2

Related Questions