CODEWITHSUNDEEP
phpjavascriptjqueryhtml
Travis Leleu
Travis Leleu

Reputation: 4230

Add form element dynamically using javascript -- not submitting

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!

Upvotes: 6

Views: 6099

Answers (4)

Asif Khan
Asif Khan

Reputation: 11

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.

Upvotes: 1

MagikWorx
MagikWorx

Reputation: 342

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.

Upvotes: 1

amitkaz
amitkaz

Reputation: 2712

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

Upvotes: 0

Olivvv
Olivvv

Reputation: 1200

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

and add_fields / add_files

Upvotes: 2

Related Questions