Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 30.05.2019, 12:59
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,027

Сообщение от laimas
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)
Ответить с цитированием
  #12 (permalink)  
Старый 30.05.2019, 13:05
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,517

Сообщение от Malleys
В спецификации HTML5 сказано, что нет никаких ограничений на имена
С этим ни кто и не спорит, вот только вы можете пояснить "пользу" от нумерации и классов, и id в данном случае? А уж тем более не приходится говорить о вредности в именовании полей таким способом.
Ответить с цитированием
  #13 (permalink)  
Старый 30.05.2019, 17:25
Новичок на форуме
Отправить личное сообщение для eLDeR Посмотреть профиль Найти все сообщения от eLDeR
 
Регистрация: 28.05.2019
Сообщений: 5

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

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

и ничего не работает
Ответить с цитированием
  #14 (permalink)  
Старый 30.05.2019, 17:38
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,517

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

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

Последний раз редактировалось laimas, 30.05.2019 в 17:44.
Ответить с цитированием
  #15 (permalink)  
Старый 30.05.2019, 18:09
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,027

Сообщение от laimas
jQuery коли он у вас и так есть
И как это упростит манипулирование полями и материалами? Я понимаю, вы бы сказали React.js, у вас есть данные и вы пишете интерфейс при помощи класса наследующего от React.Component, который позволит менять состояние полей и материалов... А jQuery здесь просто спор об именах методов, он просто обёртка не привносящая никакой концепции!
Ответить с цитированием
  #16 (permalink)  
Старый 30.05.2019, 18:19
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,517

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

Может хватит пустым красноречием заниматься?
Ответить с цитированием
  #17 (permalink)  
Старый 30.05.2019, 19:04
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,027

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

Сообщение от laimas
Только мне не надо пепла на голову, не я о нем заикнулся.
А что причёска сгорит? Просто в данном подходе с jQuery или без минус в том, что нет хранилища данных... Нужно начать с чистых данных и уже ими манипулировать... А React использовать или web-компоненты... без разницы, я думаю первый будет проще для начинающего в данном случае, поскольку есть метод setState.
Ответить с цитированием
  #18 (permalink)  
Старый 30.05.2019, 19:27
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,517

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

Так к чему выпендриваться, да еще предлагать React? Или вы это для меня его сватаете? Да нехрен мне он нужен, мне заняться больше нечем, как разводить демагогию что лучше, а что хуже.
Ответить с цитированием
  #19 (permalink)  
Старый 30.05.2019, 19:55
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,027

Сообщение от laimas
Да итиего мать, ну разве вы не видите, что он не понимает вами писаного?
Из-за вашей упёртости и нежелания понимать, что jQuery написанный на JavaScript, выдаёт те же методы, что и в DOM API, только под другими названиями, и того, что jQuery не очень хорошо подходит для решения этой задачи, я даже не заметил вопрос...
Сообщение от laimas
А этот код в общем-то не полный, в нем нет очистки значений клонируемых полей. А именование как было неудобным (querySelector(".rabota").name = "rabota"+elemCount), так и осталось. А именование других полей приведет к тому, что у вас наборы добавляемых полей (материалы) не будут соответствовать индексам добавляемых блоков (полей).
Да, это так и есть... поэтому я и перенёс решение на react, поскольку перенос в jquery не помогает решить ни одну из этих проблем, которые вы перечислили! Вот я написал далее решение, в котором решены все эти проблемы... А тот пример, про который вы говорите, в нём я только показал, что не нужно дублировать разметку (и правда её приходилось бы редактировать в двух местах!)

eLDeR,
Сообщение от 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)

Последний раз редактировалось Malleys, 30.05.2019 в 20:30.
Ответить с цитированием
  #20 (permalink)  
Старый 30.05.2019, 21:47
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,517

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



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

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


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