Форма внутри формы

[Malleys]

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

Да! Но, так он сам наверное такое захочет сделать!

В спецификации HTML5 сказано, что нет никаких ограничений на имена, которые можете использовать в атрибуте класса, однако рекомендуется использовать значения, которые описывают сущность/природу содержимого, а не такие значения, которые описывают желаемое представление контента.(https://www.w3.org/TR/html52/dom.htm...f-global-class)

Т. е. в том примере с Bootstrap лучше так не делать, хотя можно. Например, лучше <div class="material-totals"></div>, а не <div class="alert alert-primary text-center" id="totals"><strong>1</strong></div></div>

Также настоятельно рекомендуется рассматривать элемент <div> как крайнюю меру, когда уже никакой другой элемент не подходит. Использование более подходящих элементов вместо элемента <div> обеспечивает лучшую доступность и код, который легче поддерживать. (https://www.w3.org/TR/html52/groupin...he-div-element)

[laimas]

В спецификации HTML5 сказано, что нет никаких ограничений на имена

С этим ни кто и не спорит, вот только вы можете пояснить "пользу" от нумерации и классов, и id в данном случае? А уж тем более не приходится говорить о вредности в именовании полей таким способом.

[eLDeR]

Вроде все получилось, но почему то выскакивает ошибка

Uncaught TypeError: Cannot set property 'textContent' of null
и
Uncaught TypeError: Cannot set property 'name' of null

Переделал этот код

<form action="#" method="POST" class="form-horizontal">
	<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 rabota" 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">
			<div class="col-12 mater">
				<div class="row list" id="material_row">
					<div class="col-8"><input class="form-control mb-3 mater_name" type="text" name="mater_name1[]" placeholder="Название"></div>
					<div class="col-2"><input class="form-control mb-3 mater_units" type="text" name="mater_units1[]" placeholder="Количество"></div>
					<div class="col-2"><input class="form-control mb-3 mater_price" type="text" name="mater_price1[]" placeholder="Цена за ед."></div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-12">
				<input id="add_material" 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">
			<button name="updates" class="btn btn-primary btn-lg btn-block">Обновить</button>
		</div>
	</div>
</form>

var template = document.querySelector(".param").cloneNode(true);
addEventListener("click", ({ target }) => {
	switch(target.id) {
  	case "form_status_added":
    	var elemCount = document.querySelectorAll(".param").length + 1;
      var node = template.cloneNode(true);
      node.querySelector("#totals").textContent = elemCount;
      node.querySelector(".rabota").name = "rabota"+elemCount;
      node.querySelector(".mater_name").name = "mater_name"+elemCount+"[]";
      node.querySelector(".mater_units").name = "mater_name"+elemCount+"[]";
      node.querySelector(".mater_price").name = "mater_name"+elemCount+"[]";
      document.querySelector("#next").before(node);
    	break;
      
      case "add_material":
      var node = target.closest(".param").querySelector("#material_row:last-of-type");
      node.after(node.cloneNode(true));
    	break;
  }
});

И перенеся на сайт мне выдает ошибку
?m=edit:148 Uncaught TypeError: Cannot read property 'cloneNode' of null
at ?m=edit:148

и ничего не работает

[laimas]

eLDeR, используйте jQuery коли он у вас и так есть, и вы в нем что-то можете. А этот код в общем-то не полный, в нем нет очистки значений клонируемых полей. А именование как было неудобным (querySelector(".rabota").name = "rabota"+elemCount), так и осталось. А именование других полей приведет к тому, что у вас наборы добавляемых полей (материалы) не будут соответствовать индексам добавляемых блоков (полей).

Ну возьмите простой php код, поместите в него форму с таким именованием полей и отправьте ее, чтобы убедится в том, что вы получите массив неудобный для обработки.

[Malleys]

jQuery коли он у вас и так есть

И как это упростит манипулирование полями и материалами? Я понимаю, вы бы сказали React.js, у вас есть данные и вы пишете интерфейс при помощи класса наследующего от React.Component, который позволит менять состояние полей и материалов... А jQuery здесь просто спор об именах методов, он просто обёртка не привносящая никакой концепции!

[laimas]

И как это упростит манипулирование полями и материалами?

А окончание предложения прочитать лень? Вы кому хотите React предложить? Только мне не надо пепла на голову, не я о нем заикнулся.

Может хватит пустым красноречием заниматься?

[Malleys]

Может хватит пустым красноречием заниматься?

Какое красноречие, вы предлагаете выуживать данные из DOM, не легче их сразу хранить в объекте и трансформировать как надо? Вы даже не представляете сколько лишнего нужно написать для поддержания индексов в порядке! Поэтому я и предложил готовое решение в виде React, которое хорошо справляется с данной задачей!

Только мне не надо пепла на голову, не я о нем заикнулся.

А что причёска сгорит? Просто в данном подходе с jQuery или без минус в том, что нет хранилища данных... Нужно начать с чистых данных и уже ими манипулировать... А React использовать или web-компоненты... без разницы, я думаю первый будет проще для начинающего в данном случае, поскольку есть метод setState.

[laimas]

Какое красноречие, вы предлагаете выуживать данные из DOM, не легче их сразу хранить в объекте и трансформировать как надо?

Да итиего мать, ну разве вы не видите, что он не понимает вами писаного? А то что у него в проекте широко используется jQuery, так это понятно, и то что он что-то понимает в нем и может на нем писать тоже ясно. И проблем для него гораздо меньше будет.

Так к чему выпендриваться, да еще предлагать React? Или вы это для меня его сватаете? Да нехрен мне он нужен, мне заняться больше нечем, как разводить демагогию что лучше, а что хуже.

[Malleys]

Да итиего мать, ну разве вы не видите, что он не понимает вами писаного?

Из-за вашей упёртости и нежелания понимать, что jQuery написанный на JavaScript, выдаёт те же методы, что и в DOM API, только под другими названиями, и того, что jQuery не очень хорошо подходит для решения этой задачи, я даже не заметил вопрос...

А этот код в общем-то не полный, в нем нет очистки значений клонируемых полей. А именование как было неудобным (querySelector(".rabota").name = "rabota"+elemCount), так и осталось. А именование других полей приведет к тому, что у вас наборы добавляемых полей (материалы) не будут соответствовать индексам добавляемых блоков (полей).

Да, это так и есть... поэтому я и перенёс решение на react, поскольку перенос в jquery не помогает решить ни одну из этих проблем, которые вы перечислили! Вот я написал далее решение, в котором решены все эти проблемы... А тот пример, про который вы говорите, в нём я только показал, что не нужно дублировать разметку (и правда её приходилось бы редактировать в двух местах!)

eLDeR,

Вроде все получилось, но почему то выскакивает ошибка

Uncaught TypeError: Cannot set property 'textContent' of null
и
Uncaught TypeError: Cannot set property 'name' of null

Скрипт должен идти после формы.

Вот тоже самое, но при помощи React.js https://codepen.io/Malleys/pen/BeGBVL?editors=0010
Добавил удаление полей, материалов и сериализацию данных, вам только осталось написать реализацию отправки этих данных. (Сейчас выводит их в alert)

[laimas]

Из-за вашей упёртости и нежелания понимать
что jQuery не очень хорошо подходит для решения этой задачи, я даже не заметил вопрос...

Я просто хрнею, иногда, от ваших слов. Кроме демагогии и желания убедить того кто, мягко сказать, не врубается, иметь JQ и что-то писать на нем, залезть в такие дебри для него, что мама не горюй. Слава богу, что без тезисов "JQ отстой, ату его, даешь React". Кошмар какой-то, ей богу.