28.05.2019, 11:09
|
|
Интересующийся
|
|
Регистрация: 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
|
|
28.05.2019, 11:26
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от eLDeR
|
Это добавление внутри добавления.
Не работает #form_1
|
Если добавляемое динамически, значит либо делегировать ближайшему родителю обработчик, либо устанавливать его элементу после добавления. Такого селектора быть не может: $("form_1"), наверное так $("#form_1"), но id должно быть уникальным, а значит по классу $(".form_1"). |
|
28.05.2019, 14:21
|
|
Интересующийся
|
|
Регистрация: 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 ?
|
|
28.05.2019, 14:34
|
|
Профессор
|
|
Регистрация: 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)
}}
|
|
29.05.2019, 09:41
|
|
Интересующийся
|
|
Регистрация: 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 );
});
|
|
29.05.2019, 10:01
|
|
Профессор
|
|
Регистрация: 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(); и затем вставлять
});
|
|
30.05.2019, 09:24
|
|
Интересующийся
|
|
Регистрация: 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/
Я никак не пойму как мне дописать код чтоб все работало
Пробую разобраться но не понимаю |
|
30.05.2019, 10:04
|
|
Профессор
|
|
Регистрация: 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. По имени этого класса делегировать обработку этих кнопок форме, как это делается было показано ранее.
|
|
30.05.2019, 12:40
|
 |
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
А зачем вам дублировать содержимое? Вы можете использовать уже прописанный в HTML код как шаблон для создания последующих частей!
Вот код, который добавляет материалы и поля! https://jsfiddle.net/ga5sw7fu/
Почистите код от лишних классов и <div>-ов! |
|
30.05.2019, 12:52
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Malleys, только именовать поля нужно так:
rabota[0]
mater_name[0][]
mater_units[0][]
mater_price[0][]
и в обработчике form_status_added увеличивать индекс. Я так понимаю он хочет сгруппировать наборы. Вот только, по идее, должна быть возможность и удаления добавленного, а значит надо следить за всеми наборами, чтобы не получить дубликата ключа.
|
|
|
|
