Dynamically adding HTML form field using jQuery

Question

Since I cant use div inside forms, I wonder how can I add new field in the middle of the form (and I can't use .append() here) without reloading the page or rewriting the form? (using jQuery)

EDIT: this is the HTML:

<form id="form-0" name="0">
<b>what is bla?</b><br>
<input type="radio" name="answerN" value="0"> aaa <br>
<input type="radio" name="answerN" value="1"> bbb <br>
<input type="radio" name="answerN" value="2"> ccc <br>
<input type="radio" name="answerN" value="3"> ddd <br>
//This is where I want to dynamically add the new radio or text line

<input type="submit" value="Submit your answer">
//but HERE is where .append() will put it!

</form>

You question doesn't make too much sense. What have you already tried? — Richard Dalton
– Richard Dalton, Commented May 23, 2011 at 15:25
I tried to slelect the one-before-last child of the form and use append to it but it didn't work — ilyo
– ilyo, Commented May 23, 2011 at 15:38
What makes you think you can't use div elements inside form elements? — zzzzBov
– zzzzBov, Commented Oct 20, 2011 at 17:04

Edwin · Accepted Answer · 2014-05-23 13:46:45Z

75

What seems to be confusing this thread is the difference between:

$('.selector').append("<input type='text'/>");

Which appends the target element as a child of the .selector.

And

$("<input type='text' />").appendTo('.selector');

Which appends the target element as a child of the .selector.

Note how the position of the target element & the .selector change when using the different methods.

What you want to do is this:

$(function() {

  // append input control at start of form
  $("<input type='text' value='' />")
     .attr("id", "myfieldid")
     .attr("name", "myfieldid")
     .prependTo("#form-0");

  // OR

  // append input control at end of form
  $("<input type='text' value='' />")
     .attr("id", "myfieldid")
     .attr("name", "myfieldid")
     .appendTo("#form-0");

  // OR

  // see .after() or .before() in the api.jquery.com library

});

edited May 23, 2014 at 13:46

Edwin

357 bronze badges

answered May 23, 2011 at 17:17

thastark

1,25310 silver badges9 bronze badges

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

Comments

Fredrik · Accepted Answer · 2011-05-23 15:39:18Z

14

This will insert a new element after the input field with id "password".

$(document).ready(function(){
  var newInput = $("<input name='new_field' type='text'>");
  $('input#password').after(newInput);
});

Not sure if this answers your question.

answered May 23, 2011 at 15:39

Fredrik

2,0463 gold badges15 silver badges26 bronze badges

Comments

Rob · Accepted Answer · 2011-05-23 15:24:49Z

13

You can add any type of HTML with methods like append and appendTo (among others):

jQuery manipulation methods

Example:

$('form#someform').append('<input type="text" name="something" id="something" />');

answered May 23, 2011 at 15:24

Rob

7,8277 gold badges39 silver badges39 bronze badges

Comments

Manuel · Accepted Answer · 2016-01-29 16:41:28Z

7

something like so might work:

<script type="text/javascript">
$(document).ready(function(){
    var $input = $("<input name='myField' type='text'>");
    $('#section2').append($input);
});
</script>

<form>
    <div id="section1"><!-- some controls--></div>
    <div id="section2"><!-- for dynamic controls--></div>
</form>

edited Jan 29, 2016 at 16:41

Manuel

84614 silver badges32 bronze badges

answered May 23, 2011 at 15:25

pixelbobby

4,4305 gold badges33 silver badges50 bronze badges

3 Comments

ilyo Over a year ago

@Rob, @pixelbobby, tahnx but the thing is if have a full form, i cant use append because it will insert the line below the </from> tag so it wont be a part of the form, how can i insert the $input in the middle of the form?

Richard Dalton Over a year ago

@IlyaD - Append inserts the new element into the tag, in this case it will put the new input inside the form tags.

pixelbobby Over a year ago

@llyaD, see my updated answer. I've added code that would insert the control in a specific position inside the form. Also, you can use prepend(), insertAfter(), and insertBefore() to place a control at a specific position within an element.

Datadimension · Accepted Answer · 2017-01-19 00:29:06Z

0

There appears to be a bug with appendTo using a frameset ID appending to a FORM in Chrome. Swapped out the attribute type directly with div and it works.

answered Jan 19, 2017 at 0:29

Datadimension

1,1041 gold badge16 silver badges37 bronze badges

Collectives™ on Stack Overflow

Dynamically adding HTML form field using jQuery

5 Answers 5

Comments

Comments

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related