Edit: I fixed the problem by just starting from scratch. Sorry to waste y'alls time. Please vote to close if you feel so inclined.

I'm having trouble getting the actual data in a form to submit when the input fields are added via javascript. The fields show up, and in the right place, but when I do a var_dump( fieldname) on the server side, nothing is showing up. Inspecting with Live HTTP headers tells me that the browser isn't trying to submit the dynamically added form fields.

Do I need to somehow "attach" my dynamically created form inputs to the form?

My code:

HTML

<form id="att_form" method="post" name="add_attachments" enctype="multipart/form-data" action="#">
<-- below input to prove form submits, just not the dyn added elements -->
<input name="data[one]" type="text" />
<div id="add_fields"></div>
<input type="submit" />
</form>

Javascript

function addFormField()
{
 var id = 1;
 var htm = "<p id='row" + id + "'><input type='text' size='20' name='txt[]' id='txt" + id + "' /></p>";
 $("#add_fields".append( htm );
}

When I submit the form, my input named data[one] shows up as a POSTd value, but those added with addFormField() do not. They show up, in the HTML, at the correct place, but don't POST. Do I need to append the element as a child to my form element to get it to submit?

I've seen Submit form input fields added with javascript which is where I got the idea of appending the data specifically to the form child, but that will require some restructuring of my CSS. So, I'm hoping that it's something simple I can do in the above code.

Thanks in advance!

edit: fixed the typos, but still not working. I've decided to use the library free JS method discussed in the SO link above, as that works fine. Thanks for the help though!

Edit: I fixed the problem by just starting from scratch. Sorry to waste y'alls time. Please vote to close if you feel so inclined.

I'm having trouble getting the actual data in a form to submit when the input fields are added via javascript. The fields show up, and in the right place, but when I do a var_dump( fieldname) on the server side, nothing is showing up. Inspecting with Live HTTP headers tells me that the browser isn't trying to submit the dynamically added form fields.

Do I need to somehow "attach" my dynamically created form inputs to the form?

My code:

HTML

<form id="att_form" method="post" name="add_attachments" enctype="multipart/form-data" action="#">
<-- below input to prove form submits, just not the dyn added elements -->
<input name="data[one]" type="text" />
<div id="add_fields"></div>
<input type="submit" />
</form>

Javascript

function addFormField()
{
 var id = 1;
 var htm = "<p id='row" + id + "'><input type='text' size='20' name='txt[]' id='txt" + id + "' /></p>";
 $("#add_fields".append( htm );
}

When I submit the form, my input named data[one] shows up as a POSTd value, but those added with addFormField() do not. They show up, in the HTML, at the correct place, but don't POST. Do I need to append the element as a child to my form element to get it to submit?

I've seen Submit form input fields added with javascript which is where I got the idea of appending the data specifically to the form child, but that will require some restructuring of my CSS. So, I'm hoping that it's something simple I can do in the above code.

Thanks in advance!

edit: fixed the typos, but still not working. I've decided to use the library free JS method discussed in the SO link above, as that works fine. Thanks for the help though!

• php
• javascript
• jquery
• html

• Does it work at al if you append the html to, for example, a named-fieldset-child of the form? – David Thomas Commented Sep 6, 2009 at 17:58
• Not sure, but I'm trying to not get stuck on this instance. It's going into some pretty ugly html. Ran out of allotted time to try out all the great suggestions, but thank you all for your help! Closing issue. – Travis Leleu Commented Sep 6, 2009 at 18:34

4 Answers 4

there is 2 typos in your code: htm instead of html

and add_fields / add_files

There were a lot of typos in your code. For example, you didn't close the selector tag for jquery.

You put $("#add_fields".append( htm );

Should have been $("#add_fields").append( htm );

Notice the missing parantheses.

But I believe your problem lies mainly in how you're trying to access the values through PHP. I just put your source in a test page and it all works if you access the values correctly.

<?php
foreach ($_REQUEST['txt'] as $printme) 
    echo $printme."<br/>";
?>

The above source works fine.

When you are adding/appending or using innerHtml to place form fields as html, then sometime it will place it outside the form, you will see it as part of form but internally it is not.

To resolve this issue you need to add form attribute with input filed like form=myForm, and myForm should be your form id.

Is that your actual code?

If so, you didn't close the input tag and the p tag.. so maybe the form ignore them..

var htm = "<p id='row" + id + "'><input type='text' size='20' name='txt[]' id='txt" + id + "' /></p>";