Adding a form element dynamically using javascript - not sending

Question

Edit: I fixed the problem, just starting from scratch. Sorry to waste time. Please vote to close if you feel so addicted.

I'm having trouble getting the actual data in the form to submit when input fields are added via javascript. Fields are displayed in the right place, but when I do var_dump (field name) on the server side, nothing appears. Checking with Live HTTP headers tells me that the browser is not trying to send dynamically added form fields.

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

My code is:

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] is displayed as the POSTd value, but those added with addFormField () do not. They are displayed in HTML, in the right place, but not POST. Do I need to add an element as a child to a form element in order to submit it?

I saw Submit form input fields added using javascript , where I got the idea of ​​adding data directly to the child form, but this will require some restructuring of my CSS. So, I hope this is something simple that I can do in the code above.

Thanks in advance!

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

Answer 1

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

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

Must be $("#add_fields").append( htm );

Note the missing brackets.

But I believe that your problem is mainly how you are trying to access values ​​through PHP. I just put your source on the test page and it all works if you reach the values ​​correctly.

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

The above source is working fine.

Answer 2

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

and add_fields / add_files

Answer 3

Is this your actual code?

If so, you have not closed the input tag and p tag. Therefore, perhaps the form ignores them.

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

Answer 4

When you add / add or use innerHtml to place the fields of a form as html, then sometime it will be placed outside the form, you will see it as part of the form, but internally it is not.

To fix this problem, you need to add the form attribute with the entered name as form=myForm , and myForm should be your form identifier.