Insert input into div jQuery

Question

I need some help. I have a form with some inputs and he sorted with divs. I want to insert into the div more inputs so I tried to do something like this-

$(document).ready(function(){
  $("#more").click(function(){
    $("#div_name").append("<input type=\"text\" name\"test\" value=\"test\" />");
  });
});

And the html is

<form action="" method="post" enctype="multipart/form-data" name="form_name">
   <input type="text" name="text_input" value="test" />
   <div id="div_name"></div>
   <input type="button" id="more" value="Add more" />
</form>

And it's works and add the inputs great, but when I send the form he won't send the input that the jquery added because if I'll do print_r($_POST); he will show me all the posts except those I just added, so the output will be

        Array
(
    [text_input] => test
)

also when I used the jQuery code above. But when I'm doing $("form").append(...); , everything is going great but the input isn't in the div. Thank you. :)

you should post your html as well

Gavriel
– Gavriel

2012-06-07 19:27:48 +00:00
Commented Jun 7, 2012 at 19:27 — Gavriel
– Gavriel, Commented Jun 7, 2012 at 19:27
is the #div_name in the form?

Emond
– Emond

2012-06-07 19:28:25 +00:00
Commented Jun 7, 2012 at 19:28 — Emond
– Emond, Commented Jun 7, 2012 at 19:28
Can you show what's being rendered after the append?

Terry
– Terry

2012-06-07 19:44:06 +00:00
Commented Jun 7, 2012 at 19:44 — Terry
– Terry, Commented Jun 7, 2012 at 19:44
@Videron I found your issue in my answer :)

wirey00
– wirey00

2012-06-07 21:34:52 +00:00
Commented Jun 7, 2012 at 21:34 — wirey00
– wirey00, Commented Jun 7, 2012 at 21:34

wirey00 · Accepted Answer · 2012-06-07 21:21:25Z

2

First of all the dynamic inputs you are inserting into the form will all have the same name so that wont work. You will either have to append a number/String to the end of the name to differentiate each input data.

Here's a fiddle for you to checkout and it shows that the form element does contain the dynamically created input elements. http://jsfiddle.net/umuff/

UPDATE:

Found what you are doing wrong

name\"test\" <=== You forgot the equals sign after name

heres a working fiddle http://jsfiddle.net/umuff/1/

edited Jun 7, 2012 at 21:21

answered Jun 7, 2012 at 20:46

wirey00

33.7k7 gold badges56 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gavriel · Accepted Answer · 2012-06-07 19:37:31Z

1

your div should be inside the form. just move the form's beginning tag to be before the div, and the /form tag after the /div.

if this doesn't work do it the other way around:

<div id="...">
   <form>
   </form>
</div>

edited Jun 7, 2012 at 19:37

answered Jun 7, 2012 at 19:28

Gavriel

19.3k13 gold badges73 silver badges116 bronze badges

1 Comment

Videron Over a year ago

That's what I did <form action="" method="post" enctype="multipart/form-data" name="form_name"> <div id="div_id"></div> </form> And nothing..

Collectives™ on Stack Overflow

Insert input into div jQuery

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related