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 · Answer

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.

User · Answer

What seems to be confusing this thread is the difference between       selector   append   lt input type  text   gt        Which appends the target element as a child of the  selector   And      lt input type  text    gt    appendTo   selector      Which appends the target element as a child of the  selector   Note how the position of the target element  amp  the  selector change when using the different methods   What you want to do is this     function           append input control at start of form       lt input type  text  value      gt          attr  id    myfieldid         attr  name    myfieldid         prependTo   form-0          OR       append input control at end of form       lt input type  text  value      gt          attr  id    myfieldid         attr  name    myfieldid         appendTo   form-0          OR       see  after   or  before   in the api jquery com library

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

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

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

[jquery] Dynamically adding HTML form field using jQuery

Examples related to jquery

Examples related to html

Examples related to dom