javascript - Create Repeated Fields in jQuery -


$(documnet).ready(function(){  $('#more_finance').click(function(){                                  var add_new ='<div class="form-group finance-contact" id="finance_3"><div class="col-sm-9"><label for="firstname" class="control-label">finance contact#</label></div><div class="col-sm-9"><input type="text" id="finance" name="finance[]"placeholder="finance contact" class="form-control" autofocus></div>\n\                                      <a href="#" class="delete_png"><img src="/img/deleted-box.png"></a></div>';  $(add_new).insertafter( "#finance_1");  });    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="form-group finance-contact" id="finance_1">                      <div class="col-sm-12">                          <label for="firstname" class="control-label">finance contact</label>                      </div>                      <div class="col-sm-12">                          <input type="text" id="finance1" name="finance[]" placeholder="finance contact" class="form-control" autofocus>                      </div>              </div>  <div class="col-sm-12">               <input type="button" id="more_finance" value="add more">              </div>

i want code insert multiple when click add more button , remove repeated fields

i find answer

jquery(document).ready(function(){    jquery('#more_senior').click(function(){                                  var finance_cont1=jquery('.senior-contact').length;                                   var finance_cont=finance_cont1+1;                                  var add_new ='<div class="form-group senior-contact" id="senior_'+finance_cont+'"><div class="col-sm-9"><label for="firstname" class="control-label">senior mgmt. contact#</label></div><div class="col-sm-9"><input type="text" id="seniormgmt'+finance_cont+'" name="seniormgmt[]"placeholder="senior mgmt. contact" class="form-control" autofocus></div>\n\                                  <a href="#" class="delete_png">remove</a></div>';                                  jquery(add_new).insertafter( "#senior_"+finance_cont1 );                                  delete_fields();                                                            });    function delete_fields(){                              $('.delete_png').on("click",function(){                                      var class_name=jquery(this).parent().attr('class');                                      class_name=class_name.split(' ');                                      var id_name=jquery(this).parent().attr('id');                                      var finance_cont2=jquery('.'+class_name[1]).length;                                       var finance_cont3=finance_cont2-1;                                      var id_first=id_name.split('_');                                      $('#'+id_name).remove();                                      delete_fields();                                                        });                              }  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="col-sm-4">              <h4><strong>senior mgmt. contacts</strong></h4>              <div class="form-group senior-contact" id="senior_1">                      <div class="col-sm-12">                          <label for="firstname" class="control-label">senior mgmt. contact</label>                      </div>                      <div class="col-sm-12">                          <input type="text" id="seniormgmt1" value="" name="seniormgm[]" placeholder="senior mgmt. contact" class="form-control" autofocus>                      </div>              </div>    <div class="col-sm-12">               <input type="button" id="more_senior" value="add more">              </div>    </div>


Comments

Popular posts from this blog

amazon web services - S3 Pre-signed POST validate file type? -

c# - Check Keyboard Input Winforms -