Adding rows dynamically with jQuery

Question

I m building a form where I need multiple optional inputs  what I have is basically this    Every time a user presses the plus button a new row of form inputs should be added to the form  how can I do this in jQuery  Also  is it possible to automatically add a new row when all rows  or just the last row  if it s easier   faster  are filled  That way the user wouldn t need to press the plus button  I m sorry for asking maybe such a basic question but I m still very green with jQuery  I could do this with PHP but I m sure Javascript   jQuery plays a more appropriate role here  Thanks in advance    alex   lt  DOCTYPE html gt   lt head gt   lt script type  quot text javascript quot  src  quot http   ajax googleapis com ajax libs jquery 1 4 0 jquery min js quot  gt  lt  script gt   lt script type  quot text javascript quot  gt   form       personas     rows    form find   person        a add   click function          rows find   first   clone   insertAfter  rows find   last          justInserted    rows find   last         justInserted hide         justInserted find  input   val         it may copy values from first one      justInserted slideDown 500        lt  script gt   lt  head gt    lt body gt   lt form id  quot personas quot  name  quot personas quot  method  quot post quot  action  quot  quot  gt     lt table width  quot 300 quot  border  quot 1 quot  cellspacing  quot 0 quot  cellpadding  quot 2 quot  gt       lt tr gt         lt td gt Name lt  td gt         lt td gt More  lt  td gt       lt  tr gt       lt tr class  quot person quot  gt         lt td gt  lt input type  quot text quot  name  quot name   quot  id  quot name   quot    gt  lt  td gt         lt td gt  lt a href  quot   quot  id  quot add quot  gt   lt  a gt  lt  td gt       lt  tr gt     lt  table gt   lt  form gt   lt  body gt   lt  html gt

User · Answer

As an addition to answers above  you probably might need to change ids in names ids of input elements  pls note  you should not have digits in fields name      lt input name  someStuff entry 2  fieldOne  id  someStuff fdf fieldOne 2     gt    I have done this having some global variable by default set to 0   var globalNewIndex   0    and in the add function after you ve cloned and resetted the values in the new row                   var newIndex   globalNewIndex 1                  var changeIds   function i  val                        return val replace globalNewIndex newIndex                                         mytable tbody gt tr last input   attr  name   changeIds   attr  id   changeIds                    globalNewIndex

User · Answer

Building on the other answers  I simplified things a bit  By cloning the last element  we get the  add new  button for free  you have to change the ID to a class because of the cloning  and also reduce DOM operations  I had to use filter   instead of find   to get only the last element       js-addNew   on  click   function e       e preventDefault       var  rows         person            last      rows filter   last            newRow    last clone   insertAfter  last        last find     js-addNew    remove       remove old button     newRow hide   find  input   val          newRow slideDown 500

User · Answer

This will get you close  the add button has been removed out of the table so you might want to consider this      lt script type  text javascript  gt        document  ready function                 add   click function                   mytable tbody gt tr last   clone true  insertAfter   mytable tbody gt tr last              return false                       lt  script gt    HTML markup looks like this     lt a  id  add  gt   lt  a gt  lt  td gt     lt table id  mytable  width  300  border  1  cellspacing  0  cellpadding  2  gt     lt tbody gt       lt tr gt         lt td gt Name lt  td gt       lt  tr gt       lt tr class  person  gt         lt td gt  lt input type  text  name  name  id  name    gt  lt  td gt       lt  tr gt       lt  tbody gt     lt  table gt    EDIT To empty a value of a textbox after insert            mytable tbody gt tr last   clone true  insertAfter   mytable tbody gt tr last            mytable tbody gt tr last  name   val          return false    EDIT2 Couldn t help myself  to reset all dropdown lists in the inserted TR you can do this      mytable tbody gt tr last   each function    this reset                    I will leave the rest to you

User · Answer

Untested  Modify to suit    form       my-form      rows    form find   person-input-row        button add-new   click function           rows find   first   clone   insertAfter  rows find   last           justInserted    rows find   last         justInserted hide         justInserted find  input   val         it may copy values from first one      justInserted slideDown 500           This is better than copying innerHTML because you will lose all attached events etc

User · Answer

I have Tried something like this and its works fine     this is the html part      lt table class  dd  width  100   id  data  gt   lt tr gt   lt td gt Year lt  td gt   lt td gt   lt  td gt   lt td gt  lt select name  year1  id  year1   gt   lt option value  2012  gt 2012 lt  option gt   lt option value  2011  gt 2011 lt  option gt   lt  select gt  lt  td gt   lt td gt Month lt  td gt   lt td gt   lt  td gt   lt td width  17   gt  lt select name  month1  id  month1  gt     lt option value  1  gt January lt  option gt     lt option value  2  gt February lt  option gt     lt option value  3  gt March lt  option gt     lt option value  4  gt April lt  option gt     lt option value  5  gt May lt  option gt     lt option value  6  gt June lt  option gt     lt option value  7  gt July lt  option gt     lt option value  8  gt August lt  option gt     lt option value  9  gt September lt  option gt     lt option value  10  gt October lt  option gt     lt option value  11  gt November lt  option gt     lt option value  12  gt December lt  option gt   lt  select gt  lt  td gt   lt td width  7   gt Week lt  td gt   lt td width  3   gt   lt  td gt   lt td width  17   gt  lt select name  week1  id  week1   gt     lt option value  1  gt 1 lt  option gt     lt option value  2  gt 2 lt  option gt     lt option value  3  gt 3 lt  option gt     lt option value  4  gt 4 lt  option gt   lt  select gt  lt  td gt   lt td width  8   gt  amp nbsp  lt  td gt   lt td colspan  2  gt  amp nbsp  lt  td gt   lt  tr gt   lt tr gt   lt td gt Actual lt  td gt   lt td gt   lt  td gt   lt td width  17   gt  lt input name  actual1  id  actual1  type  text    gt  lt  td gt   lt td width  7   gt Max lt  td gt   lt td width  3   gt   lt  td gt   lt td gt  lt input name  max1  id  max1  type  text    gt  lt  td gt   lt td gt Target lt  td gt   lt td gt   lt  td gt   lt td gt  lt input name  target1  id  target1  type  text    gt  lt  td gt   lt  tr gt                 this is Javascript part    lt script src  http   code jquery com jquery-latest js  gt  lt  script gt   lt script type  text javascript  gt     lt   CDATA    document  ready function     var currentItem   1      addnew   click function    currentItem        items   val currentItem   var strToAdd     lt tr gt  lt td gt Year lt  td gt  lt td gt   lt  td gt  lt td gt  lt select name  year  currentItem    id  year  currentItem     gt  lt option value  2012  gt 2012 lt  option gt  lt option value  2011  gt 2011 lt  option gt  lt  select gt  lt  td gt  lt td gt Month lt  td gt  lt td gt   lt  td gt  lt td width  17   gt  lt select name  month  currentItem    id  month  currentItem    gt  lt option value  1  gt January lt  option gt  lt option value  2  gt February lt  option gt  lt option value  3  gt March lt  option gt  lt option value  4  gt April lt  option gt  lt option value  5  gt May lt  option gt  lt option value  6  gt June lt  option gt  lt option value  7  gt July lt  option gt  lt option value  8  gt August lt  option gt  lt option value  9  gt September lt  option gt  lt option value  10  gt October lt  option gt  lt option value  11  gt November lt  option gt  lt option value  12  gt December lt  option gt  lt  select gt  lt  td gt  lt td width  7   gt Week lt  td gt  lt td width  3   gt   lt  td gt  lt td width  17   gt  lt select name  week  currentItem    id  week  currentItem     gt  lt option value  1  gt 1 lt  option gt  lt option value  2  gt 2 lt  option gt  lt option value  3  gt 3 lt  option gt  lt option value  4  gt 4 lt  option gt  lt  select gt  lt  td gt  lt td width  8   gt  lt  td gt  lt td colspan  2  gt  lt  td gt  lt  tr gt  lt tr gt  lt td gt Actual lt  td gt  lt td gt   lt  td gt  lt td width  17   gt  lt input name  actual  currentItem    id  actual  currentItem    type  text    gt  lt  td gt  lt td width  7   gt Max lt  td gt   lt td width  3   gt   lt  td gt  lt td gt  lt input name  max  currentItem    id   max  currentItem   type  text    gt  lt  td gt  lt td gt Target lt  td gt  lt td gt   lt  td gt  lt td gt  lt input name  target  currentItem    id  target  currentItem    type  text    gt  lt  td gt  lt  tr gt          data   append strToAdd                     gt    lt  script gt    Finaly PHP submit part       for   i   1   i  lt    count   i            year     POST  year   i        month     POST  month   i        week     POST  week   i        actual     POST  actual   i        max     POST  max   i        target     POST  target   i        extreme     POST  extreme   i        que    insert INTO table name id year month week actual max target  VALUES       POST  type          year        month        week        actual        max        target           mysql query  que        you can find more details via Dynamic table row inserter

[javascript] Adding rows dynamically with jQuery

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to forms