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    lt form id  form-0  name  0  gt   lt b gt what is bla  lt  b gt  lt br gt   lt input type  radio  name  answerN  value  0  gt  aaa  lt br gt   lt input type  radio  name  answerN  value  1  gt  bbb  lt br gt   lt input type  radio  name  answerN  value  2  gt  ccc  lt br gt   lt input type  radio  name  answerN  value  3  gt  ddd  lt br gt    This is where I want to dynamically add the new radio or text line   lt input type  submit  value  Submit your answer  gt    but HERE is where  append   will put it    lt  form gt

User · Accepted Answer

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

});

User · Answer

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

User · Answer

You can add any type of HTML with methods like append and appendTo  among others    jQuery manipulation methods  Example      form someform   append   lt input type  text  name  something  id  something    gt

User · Answer

something like so might work    lt script type  text javascript  gt    document  ready function        var  input       lt input name  myField  type  text  gt             section2   append  input        lt  script gt    lt form gt       lt div id  section1  gt  lt  -- some controls-- gt  lt  div gt       lt div id  section2  gt  lt  -- for dynamic controls-- gt  lt  div gt   lt  form gt

User · Answer

This will insert a new element after the input field with id  password      document  ready function      var newInput       lt input name  new field  type  text  gt          input password   after newInput         Not sure if this answers your question

[jquery] Dynamically adding HTML form field using jQuery

Examples related to jquery

Examples related to html

Examples related to dom