Использую следующий код для добавления динамических полей:
$(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;
});
});
});
Для одной формы на странице проблем нет. Но не могу додумать, как быть с несколькими формами - при добавлении поля в одной из них, поле вставляется и в остальные. Предполагаю, что при нажатии кнопки add надо в скрипт передавать id родительского div-блока или формы, но не могу придумать как это сделать...
Заранее спасибо
P.S. HTML формы -
<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>
Исходники брал с сайта сниппетов bootstrap - http://bootsnipp.com/snippets/XaDoK
class\id