0

Использую следующий код для добавления динамических полей:

$(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

3
  • желательно обернуть всё это в анонимную функцию и будет возможность обращаться к каждой форме напрямую минуя выборку по class\id
    – webDev_
    8 фев 2017 в 10:53
  • Немножко не понял... Собственно трудность в том, что в js я не сильно разбираюсь, общее понимание селекторов есть, а вот с реализацией связи между элементами не очень.. 8 фев 2017 в 11:41
  • Приведите ваш html-код
    – Crantisz
    8 фев 2017 в 20:14

1 ответ 1

0

Я не понял как ваш html-код соотносится с js-кодом, поэтому просто опишу, как получить id родительского блока. (как я понял, затык именно с этим)

Для этого подойдет функция .closest():

Она находит ближайшее совпадение с селектором в родителях элемента:

$('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>

2
  • сайт съел html при вставке pre. Поправил. Как я понимаю - 9 фев 2017 в 7:12
  • сайт съел html при вставке pre. Поправил. Как я понимаю - 1. - запихиваем html код кнопки добавления в buttonadd. 2 - в fvrhtmlclone помещаем div-блок fvrclonned с содержимым блока, данные которого надо скопировать. 3 - меняем содержимое fvrduplicate на fvrhtmlclone. 4 - после fvrduplicate вставляем пустой блок с классом fvrclone. 5 - по нажатию кнопки ищем класс fvrclone и после него вставляем блок с копированными input. 6 - меняем классы кнопок добавления. Мне следует здесь искать closest('fvrclone'), я правильно понимаю? 9 фев 2017 в 7:19

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.