Add remove input field dynamically with jQuery

Question

I would like to use jquery to build a dynamic add  remove form  IT should look like   Name Type Required   The example input      Name Type Required   Tony  Admin  checked  checkbox  Delete  lt   press the button will delete the row   What i have got is a example of add  remove input box how can it  convert to my idea  Do i have to use multi coloumn table  Thank you for kindly help       lt html gt   lt head gt   lt title gt jQuery add   remove textbox example lt  title gt    lt script type  text javascript  src  jquery-1 3 2 min js  gt  lt  script gt    lt style type  text css  gt      div          padding 8px         lt  style gt    lt  head gt    lt body gt    lt h1 gt jQuery add   remove textbox example lt  h1 gt    lt script type  text javascript  gt     document  ready function         var counter   2           addButton   click function           if counter gt 10               alert  Only 10 textboxes allow                return false                var newTextBoxDiv     document createElement  div              attr  id    TextBoxDiv    counter        newTextBoxDiv after   html   lt label gt Textbox     counter        lt  label gt                 lt input type  text  name  textbox    counter                 id  textbox    counter      value     gt          newTextBoxDiv appendTo   TextBoxesGroup          counter                       removeButton   click function          if counter  1             alert  No more textbox to remove              return false                   counter--               TextBoxDiv    counter  remove                        getButtonValue   click function           var msg           for i 1  i lt counter  i           msg      n Textbox      i               textbox    i  val                    alert msg                   lt  script gt   lt  head gt  lt body gt    lt div id  TextBoxesGroup  gt       lt div id  TextBoxDiv1  gt           lt label gt Textbox  1    lt  label gt  lt input type  textbox  id  textbox1   gt       lt  div gt   lt  div gt   lt input type  button  value  Add Button  id  addButton  gt   lt input type  button  value  Remove Button  id  removeButton  gt   lt input type  button  value  Get TextBox Value  id  getButtonValue  gt    lt  body gt   lt  html gt

User · Answer

You can do something like this below     when the Add Field button is clicked     add   click function  e      Append a new row of code to the   items  div       items   append   lt div gt  lt input type  text  name  input    gt  lt button  class  delete  gt Delete lt  button gt  lt  div gt           For detailed tutorial http   voidtricks com jquery-add-remove-input-fields

User · Answer

Another solution could be     lt script gt    document           ready                  function                         var wrapper       myFields                          add button                               click                                      function e                                            e preventDefault                                              wrapper                                                   append                                                                      add fields here                                                               wrapper  on  click     delFld   function e                            e preventDefault                              this  parent  div   remove                                                 lt  script gt    Source  Here

User · Answer

I took the liberty of putting together a jsFiddle illustrating the functionality of building a custom form using jQuery  Here it is     EDIT  Updated the jsFiddle to include remove buttons for each field   EDIT  As per the request in the last comment  code from the jsFiddle is below   EDIT  As per Abhishek s comment  I have updated the jsFiddle  and code below  to cater for scenarios where duplicate field IDs might arise   HTML    lt fieldset id  buildyourform  gt       lt legend gt Build your own form  lt  legend gt   lt  fieldset gt   lt input type  button  value  Preview form  class  add  id  preview    gt   lt input type  button  value  Add a field  class  add  id  add    gt    JavaScript     document  ready function             add   click function             var lastField       buildyourform div last            var intId    lastField  amp  amp  lastField length  amp  amp  lastField data  idx     1     1          var fieldWrapper       lt div class   fieldwrapper   id   field    intId        gt             fieldWrapper data  idx   intId           var fName       lt input type   text   class   fieldname     gt             var fType       lt select class   fieldtype   gt  lt option value   checkbox   gt Checked lt  option gt  lt option value   textbox   gt Text lt  option gt  lt option value   textarea   gt Paragraph lt  option gt  lt  select gt             var removeButton       lt input type   button   class   remove   value   -     gt             removeButton click function                   this  parent   remove                        fieldWrapper append fName           fieldWrapper append fType           fieldWrapper append removeButton               buildyourform   append fieldWrapper                   preview   click function                 yourform   remove            var fieldSet       lt fieldset id   yourform   gt  lt legend gt Your Form lt  legend gt  lt  fieldset gt                 buildyourform div   each function                 var id    input      this  attr  id   replace  field                   var label       lt label for       id       gt       this  find  input fieldname   first   val       lt  label gt                 var input              switch    this  find  select fieldtype   first   val                      case  checkbox                       input       lt input type   checkbox   id       id       name       id         gt                         break                  case  textbox                       input       lt input type   text   id       id       name       id         gt                         break                  case  textarea                       input       lt textarea id       id       name       id        gt  lt  textarea gt                         break                                fieldSet append label               fieldSet append input                          body   append fieldSet                 CSS   body       font-family Gill Sans MT      padding 10px    fieldset       border  solid 1px  000      padding 10px      display block      clear both      margin 5px 0px    legend       padding 0px 10px      background black      color  FFF    input add       float right    input fieldname       float left      clear left      display block      margin 5px    select fieldtype       float left      display block      margin 5px    input remove       float left      display block      margin 5px     yourform label       float left      clear left      display block      margin 5px     yourform input   yourform textarea       float left      display block      margin 5px

User · Answer

Here is my JSFiddle with corrected line breaks  or see it below     document  ready function      var MaxInputs         2    maximum extra input boxes allowed var InputsWrapper         InputsWrapper      Input boxes wrapper ID var AddButton             AddMoreFileBox      Add button ID  var x   InputsWrapper length    initlal text box count var FieldCount 1    to keep track of text box added    on add input button click   AddButton  click function  e              max input box allowed         if x  lt   MaxInputs                FieldCount      text box added ncrement               add input box               InputsWrapper  append   lt div gt  lt input type  text  name  mytext    id  field    FieldCount      gt   lt a href     class  removeclass  gt Remove lt  a gt  lt  div gt                 x      text box increment                  AddMoreFileId   show                    AddMoreFileBox   html  Add field                    Delete the  add -link if there is 3 fields              if x    3                        AddMoreFileId   hide                        lineBreak   html   lt br gt                                     return false          body   on  click    removeclass   function e     user click on remove text         if  x  gt  1                       this  parent  div   remove      remove text box                 x--    decrement textbox                      AddMoreFileId   show                         lineBreak   html                          Adds the  add  link again when a field is removed                     AddMoreFileBox   html  Add field                  return false

User · Answer

why not remove the  after   in the line  newTextBoxDiv after   html   lt label gt Textbox     counter        lt  label gt       to   newTextBoxDiv html   lt label gt Textbox     counter        lt  label gt

User · Answer

You can try this    lt input type  hidden  name  image  id  input-image   image row       gt   inputt    lt input type  hidden  name  product image  value  somevalue  gt       input-image  row  remove   append inputt

User · Answer

In your click function  you can write   function addMoreRows frm       rowCount        var recRow     lt p id  rowCount  rowCount    gt  lt tr gt  lt td gt  lt input name    type  text  size  17    maxlength  120    gt  lt  td gt  lt td gt  lt input name    type  text   maxlength  120  style  margin  4px 5px 0 5px    gt  lt  td gt  lt td gt  lt input name    type  text  maxlength  120  style  margin  4px 10px 0 0px    gt  lt  td gt  lt  tr gt   lt a href  javascript void 0    onclick  removeRow   rowCount      gt Delete lt  a gt  lt  p gt       jQuery   addedRows   append recRow       Or follow this link  http   www discussdesk com add-remove-more-rows-dynamically-using-jquery htm

User · Answer

Jquery Code    document  ready function         var max fields        10    maximum input boxes allowed     var wrapper               input fields wrap      Fields wrapper     var add button            add field button      Add button ID      var x   1    initlal text box count       add button  click function e     on add input button click         e preventDefault            if x  lt  max fields     max input box allowed             x      text box increment               wrapper  append   lt div gt  lt input type  text  name  mytext     gt  lt a href     class  remove field  gt Remove lt  a gt  lt  div gt       add input box                          wrapper  on  click    remove field   function e     user click on remove text         e preventDefault      this  parent  div   remove    x--               HTML CODE   lt div class  input fields wrap  gt       lt button class  add field button  gt Add More Fields lt  button gt       lt div gt  lt input type  text  name  mytext    gt  lt  div gt   lt  div gt

User · Answer

You should be able to create and remove input field dynamically by using jquery using this method https   www adminspress com onex view uaomui   Even you can able to generate input fields in bulk and export to string

User · Answer

You can also use something like this   lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt   lt meta charset  utf-8  gt   lt title gt jQuery Add   Remove Table Rows Dynamically lt  title gt   lt style type  text css  gt      form          margin  20px 0            form input  button          padding  5px            table          width  100           margin-bottom  20px          border-collapse  collapse            table  th  td          border  1px solid  cdcdcd            table th  table td          padding  10px          text-align  left         lt  style gt   lt script src  https   code jquery com jquery-1 12 4 min js  gt  lt  script gt   lt script type  text javascript  gt        document  ready function                add-row   click function                var name       name   val                var email       email   val                var markup     lt tr gt  lt td gt  lt input type  checkbox  name  record  gt  lt  td gt  lt td gt     name     lt  td gt  lt td gt     email     lt  td gt  lt  tr gt                   table tbody   append markup                           Find and remove selected table rows             delete-row   click function                   table tbody   find  input name  record     each function                    if   this  is   checked                           this  parents  tr   remove                                                               lt  script gt   lt  head gt   lt body gt       lt form gt           lt input type  text  id  name  placeholder  Name  gt           lt input type  text  id  email  placeholder  Email Address  gt           lt input type  button  class  add-row  value  Add Row  gt       lt  form gt       lt table gt           lt thead gt               lt tr gt                   lt th gt Select lt  th gt                   lt th gt Name lt  th gt                   lt th gt Email lt  th gt               lt  tr gt           lt  thead gt           lt tbody gt               lt tr gt                   lt td gt  lt input type  checkbox  name  record  gt  lt  td gt                   lt td gt Peter Parker lt  td gt                   lt td gt peterparker mail com lt  td gt               lt  tr gt           lt  tbody gt       lt  table gt       lt button type  button  class  delete-row  gt Delete Row lt  button gt   lt  body gt    lt  html gt

User · Answer

you can do it as follow        addButton   click function           if counter gt 10               alert  Only 10 textboxes allow                return false                var newTextBoxDiv     document createElement  div              attr  id    TextBoxDiv    counter        newTextBoxDiv after   html   lt label gt Textbox     counter        lt  label gt                 lt input type  text  name  textbox    counter                 id  textbox    counter      value     gt          newTextBoxDiv appendTo   TextBoxesGroup          counter                       removeButton   click function          if counter  1             alert  No more textbox to remove              return false                   counter--               TextBoxDiv    counter  remove                refer live demo http   www mkyong com jquery how-to-add-remove-textbox-dynamically-with-jquery

User · Answer

You need to create the element   input   jQuery   lt input name  myname  gt       and then append it to the form   jQuery   formID   append input     to remove an input you use the remove functionality   jQuery   inputid   remove      This is the basic idea  you may have feildsets that you append it too instead  or maybe append it after a specific element  but this is how to build anything dynamically really

[jquery] Add / remove input field dynamically with jQuery

Examples related to jquery

Examples related to html