I use the following code to add dynamic fields:

$(function() { $(document).ready(function(){ var buttonadd = '<span><button class="btn btn-success btn-add" type="button"><span class="glyphicon glyphicon-plus"></span></button></span>'; var fvrhtmlclone = '<div class="fvrclonned">'+$(".fvrduplicate").html()+buttonadd+'</div>'; $( ".fvrduplicate" ).html(fvrhtmlclone); $( ".fvrduplicate" ).after('<div class="fvrclone form-inline"></div>'); $(document).on('click', '.btn-add', function(e) { e.preventDefault(); $( ".fvrclone" ).append(fvrhtmlclone); $(this).removeClass('btn-add').addClass('btn-remove') .removeClass('btn-success').addClass('btn-danger') .html('<span class="glyphicon glyphicon-minus"></span>'); }).on('click', '.btn-remove', function(e) { $(this).parents('.fvrclonned').remove(); e.preventDefault(); return false; }); }); });

For one form on the page there are no problems. But I can not figure out how to deal with several forms - when adding a field to one of them, the field is inserted into the others. I suppose that when you click the add button, you must pass the id of the parent div block or form to the script, but I can’t figure out how to do it ...

Thank you in advance

PS HTML forms -

 <div> <form class="form-horizontal style-form" method="post" id="add_presale_solution_form" name="add_presale_solution_form"> <div class="control-group"> <input type="text" class="form-control" id="name" name="estimate[][name]" value="Вариант 1"> </div> <br> <h4 class="text-left">Смета затрат на подключение</h4> <div class="control-group "> <div class="controls form-inline fvrduplicate"> <label for="name">Наименование</label> <input type="text" class="form-control" id="name" name="estimate[][name]" > <label for="quantity">Количество</label> <input type="text" class="form-control" id="quantity" name="estimate[][quantity]" > <label for="total">Итог</label> <input type="text" class="form-control" id="total" name="estimate[][total]" > </div> </div> <div class="control-group"> <label for="comment">Описание</label> <div class="controls"> <textarea name="comment" id="comment" rows="5" class="form-control" value=""></textarea> </div> </div> <br> <button id="button" type="button" class="btn btn-round btn-primary" data-dismiss="modal">Отправить</button> <button type="button" class="btn btn-round btn-default pull-right" data-dismiss="modal">Отмена</button> </form> </div> <div> <form class="form-horizontal style-form" method="post" id="add_presale_solution_form" name="add_presale_solution_form"> <div class="control-group"> <input type="text" class="form-control" id="name" name="estimate[][name]" value="Вариант 1"> </div> <br> <h4 class="text-left">Смета затрат на подключение</h4> <div class="control-group "> <div class="controls form-inline fvrduplicate"> <label for="name">Наименование</label> <input type="text" class="form-control" id="name" name="estimate[][name]" > <label for="quantity">Количество</label> <input type="text" class="form-control" id="quantity" name="estimate[][quantity]" > <label for="total">Итог</label> <input type="text" class="form-control" id="total" name="estimate[][total]" > </div> </div> <div class="control-group"> <label for="comment">Описание</label> <div class="controls"> <textarea name="comment" id="comment" rows="5" class="form-control" value=""></textarea> </div> </div> <br> <button id="button" type="button" class="btn btn-round btn-primary" data-dismiss="modal">Отправить</button> <button type="button" class="btn btn-round btn-default pull-right" data-dismiss="modal">Отмена</button> </form> </div>

Sources were taken from the bootstrap snippet site - http://bootsnipp.com/snippets/XaDoK

  • it is desirable to wrap all this in an anonymous function and it will be possible to access each form directly bypassing the sample by class\id - webDev_
  • I didn’t understand a little ... Actually, the difficulty is that I don’t understand much about js, there is a general understanding of selectors, but with the realization of the connection between the elements it’s not very .. - Alexey Gorshenkov
  • Give your html-code - Crantisz

1 answer 1

I did not understand how your html-code corresponds to the js-code, so I’ll just describe how to get the parent block id. (as I understood, plugging with this)

The function .closest () is suitable for this:

It finds the closest match to the selector in the element's parents:

 $('button').click(function() { parent=$(this).closest('div.search_class'); console.log(parent.attr('id')) }) 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="find_id" class="search_class"> <div> <button>Check id</button> </div> </div>

  • site ate html when inserting pre. Corrected. As I understand it - - Alexey Gorshenkov
  • site ate html when inserting pre. Corrected. As I understand it - 1. - we push the html code of the add button into buttonadd. 2 - in fvrhtmlclone we place the fvrclonned div-block with the contents of the block, the data of which must be copied. 3 - change the contents of fvrduplicate to fvrhtmlclone. 4 - after fvrduplicate insert an empty block with the class fvrclone. 5 - by pressing the button we look for the fvrclone class and after it we insert the block with the copied input. 6 - we change classes of add buttons. I should look for closest ('fvrclone') here, I understand correctly? - Alexey Gorshenkov