Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.05.2019, 11:09
Интересующийся
Отправить личное сообщение для eLDeR Посмотреть профиль Найти все сообщения от eLDeR
 
Регистрация: 28.05.2019
Сообщений: 23

Форма внутри формы
Доброго времени суток, господа. Помогите реализовать задуманное.

Есть Код JS
$(function() {
		$("#form_status_added").click(function () {
		var elemCount = document.getElementsByClassName('param').length + 1;
			$("<div class='param mt-3'><div class='row'><div class='col-12'><div class='alert alert-primary text-center' id='totals'><strong>"+elemCount+"</strong></div></div><div class='col-12'><textarea rows='5' class='form-control mb-3' type='text' name='rabota"+elemCount+"[]' placeholder='Наименование видов работ'></textarea></div></div></div><div class='row'><div class='col-12 mb-2 text-center'><strong>Материал</strong></div></div><div class='row' id='mater"+elemCount+"'><div class='col-8'><input class='form-control mb-3' type='text' name='mater_name"+elemCount+"[]' placeholder='Название'></div><div class='col-2'><input class='form-control mb-3' type='text' name='mater_units"+elemCount+"[]' placeholder='Количество'></div><div class='col-2'><input class='form-control mb-3' type='text' name='mater_price"+elemCount+"[]' placeholder='Цена за ед.'></div></div><div class='row' id='nextmater"+elemCount+"'><div class='col-12'><input class='btn btn-primary btn-lg btn-block' type='button' value='Добавить Материал' id='form_"+elemCount+"'></div></div><div class='row'><div class='col-12'><hr></div></div>" ).insertBefore("#next");
			document.getElementById('total').value = elemCount;
		});
	 });
	$(function() {
		$("form_1").click(function () {
			$("<div class='row' id='mater1'><div class='col-8'><input class='form-control mb-3' type='text' name='mater_name1[]' placeholder='Название'></div><div class='col-2'><input class='form-control mb-3' type='text' name='mater_units1[]' placeholder='Количество'></div><div class='col-2'><input class='form-control mb-3' type='text' name='mater_price1[]' placeholder='Цена за ед.'></div></div>" ).insertBefore("#nextmater1");
		});
	 });

$(document).ready(function () {
	var elemtotal = document.getElementsByClassName('param').length;
	document.getElementById('total').value = elemtotal;
});

Код HTML
<div class="param mt-3">
			<div class="row">
			<div class="col-12"><div class="alert alert-primary text-center" id="totals"><strong>1</strong></div></div>
				<div class="col-12"><textarea rows="5" class="form-control mb-3" type="text" name="rabota1[]" placeholder="Наименование видов работ"></textarea></div>
			</div>
			<div class="row">
				<div class="col-12 mb-2 text-center"><strong>Материал</strong></div>
			</div>

			<div class="row" id="smeta_mater1">
				<div class="col-8"><input class="form-control mb-3" type="text" name="smeta_mater_name1[]" placeholder="Название"></div>
				<div class="col-2"><input class="form-control mb-3" type="text" name="smeta_mater_units1[]" placeholder="Количество"></div>
				<div class="col-2"><input class="form-control mb-3" type="text" name="smeta_mater_price1[]" placeholder="Цена за ед."></div>
			</div>
			<div class="row" id="nextmater1">
				<div class="col-12">
					<input id="form_1" class="btn btn-primary btn-lg btn-block" type="button" value="Добавить Материал">
				</div>
			</div>
			<div class="row"><div class="col-12"><hr></div></div>
		</div>
		<div class="row" id="next">
			<div class="col-6">
				<input class="btn btn-primary btn-lg btn-block" type="button" value="Добавить поле" id="form_status_added">
			</div>
			<div class="col-6">
				<input type="hidden" name="total" id="total" value="">
				<button name="updates" class="btn btn-primary btn-lg btn-block">Обновить</button>
			</div>
		</div>


Так вот. Это добавление внутри добавления.
Примерно визуализированное
https://jsfiddle.net/069fojyx/

Не работает #form_1

И как написать скрипт для всего добавленного по полю #form_status_added
Ответить с цитированием
  #2 (permalink)  
Старый 28.05.2019, 11:26
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от eLDeR
Это добавление внутри добавления.
Не работает #form_1
Если добавляемое динамически, значит либо делегировать ближайшему родителю обработчик, либо устанавливать его элементу после добавления. Такого селектора быть не может: $("form_1"), наверное так $("#form_1"), но id должно быть уникальным, а значит по классу $(".form_1").
Ответить с цитированием
  #3 (permalink)  
Старый 28.05.2019, 14:21
Интересующийся
Отправить личное сообщение для eLDeR Посмотреть профиль Найти все сообщения от eLDeR
 
Регистрация: 28.05.2019
Сообщений: 23

"#form_1" заработало
Я новичок в этой теме и неспеша разбираюсь

при добавлении основного дополнительного поля все добавляется с уникальным индификатором, но дальше добавления не работает, даже с этим
$(function() {
		$("#form_1").click(function () {
			$("<div class='row' id='smeta_mater1'><div class='col-8'><input class='form-control mb-3' type='text' name='smeta_mater_name1[]' placeholder='Название'></div><div class='col-2'><input class='form-control mb-3' type='text' name='smeta_mater_units1[]' placeholder='Количество'></div><div class='col-2'><input class='form-control mb-3' type='text' name='smeta_mater_price1[]' placeholder='Цена за ед.'></div></div>" ).insertBefore("#nextmater1");
		});
	});
	$(function() {
		$("#form_2").click(function () {
			$("<div class='row' id='smeta_mater2'><div class='col-8'><input class='form-control mb-3' type='text' name='smeta_mater_name2[]' placeholder='Название'></div><div class='col-2'><input class='form-control mb-3' type='text' name='smeta_mater_units2[]' placeholder='Количество'></div><div class='col-2'><input class='form-control mb-3' type='text' name='smeta_mater_price2[]' placeholder='Цена за ед.'></div></div>" ).insertBefore("#nextmater2");
		});
	});

И чем отличается ID и CLASS у JS ?
Ответить с цитированием
  #4 (permalink)  
Старый 28.05.2019, 14:34
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от eLDeR
И чем отличается ID и CLASS у JS ?
ID, это атрибут для уникального значения, ну так же как ваш паспорт, по которому можно идентифицировать только вас. Добавлять на страницу элементы с одинаковыми ID нельзя, так ка при обращении по нему будет возвращен только первый найденный.

Использовать разные ID можно, но только не для такого:

$("#form_1").click(function () ...
$("#form_2").click(function () ...
...

ибо это расточительство.

Используя имя класса можно получить коллекцию элементов, то есть установить единый обработчик для всех элементов. А в случае их динамического добавления на страницу, делегировать обработчик ближайшему их общему родителю, который гарантированно присутствует на странице. В jQuery это так:

$("селектор родителя").on("событие", "селектор элементов делегирующих обработку, имя их класса и т.п.", function() {
   //здесь this, это источник события, то есть элемент по которому щелкнули и т.п.
   //если им оперировать далее как jq-объектом, то это будет $(this) 
}}
Ответить с цитированием
  #5 (permalink)  
Старый 29.05.2019, 09:41
Интересующийся
Отправить личное сообщение для eLDeR Посмотреть профиль Найти все сообщения от eLDeR
 
Регистрация: 28.05.2019
Сообщений: 23

Так? (пока не работает)
<div class="row">
	<div class="col-12 smeta_mater">
		<div class="row smeta_list">
			<div class="col-8"><input class="form-control mb-3" type="text" name="smeta_mater_name1[]" placeholder="Название"></div>
			<div class="col-2"><input class="form-control mb-3" type="text" name="smeta_mater_units1[]" placeholder="Количество"></div>
			<div class="col-2"><input class="form-control mb-3" type="text" name="smeta_mater_price1[]" placeholder="Цена за ед."></div>
			</div>
		</div>
	</div>
</div>
<div class="row">
	<div class="col-12">
		<input id="addmater" class="btn btn-primary btn-lg btn-block" type="button" value="Добавить Материал">
	</div>
</div>


$(".param").on('click', '#addmater', function() {
	var list = ('.smeta_mater');
	item = list.find('.smeta_list').last().clone();
	
	item.find('input').val('');
	
	list.append( item );
});
Ответить с цитированием
  #6 (permalink)  
Старый 29.05.2019, 10:01
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Если кнопка id="addmater" всегда на странице и ею производится добавление, то зачем делегировать ее события родителю? Вы ведь до этого совсем иное показывали, добавляя блоки, по которым нужно было щелкать, вот тогда и нужно было делегировать обработку.

А в данном примере, это просто обработчик щелчков по кнопке, копировать всегда первый дочерний блок DIV (тут даже и класса не нужно) родителя div.smeta_mater, который удалить нельзя, в отличие от добавляемых, возможность удаления которых в общем-то нужна.

$("#addmater").click(function() {
    var list = ('div.smeta_mater');
    list.children().first().clone().appendTo(list).find('input').val('');
     
    //item.find('input').val(''); - а так будут возвращены поля, и только они будут вставлены
    //если так поступать, тогда item.find('input').val('').end(); и затем вставлять
});
Ответить с цитированием
  #7 (permalink)  
Старый 30.05.2019, 09:24
Интересующийся
Отправить личное сообщение для eLDeR Посмотреть профиль Найти все сообщения от eLDeR
 
Регистрация: 28.05.2019
Сообщений: 23

Все равно не могу понять

Есть div c class='param' ( первый блок с индификатором 1 )
В нем есть еще одна группа в обертке div с class='mater1' в котором есть div с class='list1' который нужно дублировать по кнопке с id='addmater1'

Нажимая по кнопке с id='form_status_added' добавляется новый div c class='param' ( уже с индификатором 2 ) и у всех остальных тоже он 2 ( mater2 list2 addmater2

https://jsfiddle.net/2v4gnbL5/

Я никак не пойму как мне дописать код чтоб все работало

Пробую разобраться но не понимаю
Ответить с цитированием
  #8 (permalink)  
Старый 30.05.2019, 10:04
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Во-первых - texarea, это и есть текстовое поле и в отличие от input оно по определению своему не нуждается в указании type="text", и что это ненужный для него атрибут укажет даже редактор подсветкой.

Во-вторых - пора бы понять, что действиями типа name='rabota"+elemCount+"[]' и т.п., результатом которых сервер получит ключ плюс их нумерацию, вы заставляете сервер заниматься пустой и бесполезной работой. Эти действия кроме вредительства ничего не дают ни клиенту, ни серверу. Именовать поля нужно как fieldname[], без всяких номеров, и сервер получит массив с ключом fieldname с индексами от 0 до ...
Тоже самое касается и class='mater1', и id='addmater1' и прочей пустой и никчемной нумерации.

В третьих - в обработчике $("#form_status_added").click(function ... достаточно клонировать первый дочерний элемент формы, вставляя его перед $(this).closest('.row').

В четвертых - не знаю куда вставлять добавления по кнопке addmater, но как было сказано выше, выбросить и нумерацию и вообще ID у этой кнопки, вместо него добавьте этой кнопке какой либо класс, пусть к примеру это будет added. По имени этого класса делегировать обработку этих кнопок форме, как это делается было показано ранее.
Ответить с цитированием
  #9 (permalink)  
Старый 30.05.2019, 12:40
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

А зачем вам дублировать содержимое? Вы можете использовать уже прописанный в HTML код как шаблон для создания последующих частей!

Вот код, который добавляет материалы и поля! https://jsfiddle.net/ga5sw7fu/

Почистите код от лишних классов и <div>-ов!
Ответить с цитированием
  #10 (permalink)  
Старый 30.05.2019, 12:52
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Malleys, только именовать поля нужно так:

rabota[0]
mater_name[0][]
mater_units[0][]
mater_price[0][]

и в обработчике form_status_added увеличивать индекс. Я так понимаю он хочет сгруппировать наборы. Вот только, по идее, должна быть возможность и удаления добавленного, а значит надо следить за всеми наборами, чтобы не получить дубликата ключа.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Отмена отправки формы в обработчике внутри AJAX Lion_astana jQuery 2 04.06.2017 23:14
Смена данных внутри формы, при нажатии кнопки... Ewigkeit13 jQuery 5 18.09.2014 04:44
Гугл-Хром динамически не создаёт первую форму внутри формы. Глюк? mister_maxim Элементы интерфейса 2 24.11.2012 18:13
У элемента img внутри form пропадает событие после onsubmit формы Eugene Events/DOM/Window 2 18.06.2009 19:21
Форма опроса + последующая отсылка заполненной формы на определенный e-mail Chemistry Элементы интерфейса 2 05.02.2009 02:14