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
Post a Comment