Форум

CraftLawrence · #1 (**permalink**) 28.09.2015, 13:58

Такая задача. Есть страница с неизвестным количеством форм (2+). Необходимо просто в каждую форму добавить input type="hidden".
Сознаю элемент:

var inp2 = document.createElement( 'input' );
	inp2.type = 'hidden';
	inp2.name = 'url';
	inp2.id = 'urlpage';
	inp2.value = location.href;

Пытаюсь добавить его к формам:

var forms = document.getElementsByTagName('form');
	for (var i = 0; i <= forms.length; i++) {
		forms[i].insertBefore(inp2, forms[i].firstChild);
	}

Выдает ошибку Cannot read property 'insertBefore' of undefined

А если вместо счетчика i вставлю цифру, к примеру 2, то для третьей формы это сработает.

var forms = document.getElementsByTagName('form');
	for (var i = 0; i <= forms.length; i++) {
		forms[2].insertBefore(inp2, forms[2].firstChild);
	}

В чем проблема счетчика i? Почему JS не принимает в качестве порядкового номера переменную?

ksa · #2 (**permalink**) 28.09.2015, 14:09

Сообщение от CraftLawrence

В чем проблема счетчика i?

Ты пытаешься один элемент пихать в разные формы...

Сколько форм - столько элементов и должно быть. А это либо клонирование... Либо создание...

CraftLawrence · #3 (**permalink**) 28.09.2015, 14:14

Сообщение от ksa

Ты пытаешься один элемент пихать в разные формы...

Сколько форм - столько элементов и должно быть. А это либо клонирование... Либо создание...

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

CraftLawrence · #4 (**permalink**) 28.09.2015, 14:24

Попытался скопировать. Та же ошибка Cannot read property 'insertBefore' of undefined, которая ссылается на forms[i] в цикле.

var inp = document.createElement( 'input' );
	inp.type = 'hidden';
	inp.name = 'url';
	inp.className = 'urlpage';
	inp.value = location.href;
	var forms = document.getElementsByTagName('form');
	document.getElementsByTagName('form')[0].insertBefore(inp, forms[0].firstChild); // создаю элемент и вставляю в первую форму
	
	for (var i = 1; i <= forms.length; i++) {

		var newSelect = document.getElementsByClassName('urlpage')[0].cloneNode(true); // копирую элемент с первой формы по классу

		forms[i].insertBefore(newSelect, forms[i].firstChild); // пытаюсь вставить его во все следующие формы
	}

ksa · #5 (**permalink**) 28.09.2015, 14:26

Сообщение от CraftLawrence

То есть, нужно перенести создание элемента внутрь цикла?

Да.

Или делать там клонирование...

Сообщение от CraftLawrence

А как задать ему.."динамическое" имя? Чтобы на каждом шагу цикла имя было новое?

Можно "клеить" циферку... Порядковый номер номер формы.
Рандомно чего-то гоношить...
В самой форме иметь для этого "заготовку"...

Да мало ли еще как.

Сообщение от CraftLawrence

Или же лучше клонированием как-то?

Не суть важно.

Как тебе удобнее будет...

CraftLawrence · #6 (**permalink**) 28.09.2015, 14:27

Аа, проблема была в условии i <= forms.length; цикла. Нужно было просто i < forms.length;
Простите за оверпостинг. Решил не удалять "свои размышления", чтобы загуглившие это могли найти решение для себя.

Спасибо, ksa

ksa · #7 (**permalink**) 28.09.2015, 14:30

CraftLawrence, вот как иллюстрация...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
form {
	border: 1px solid;
}
</style>
<script type='text/javascript'>
window.onload=function(){
	var of=document.getElementsByTagName('form');
	for (var i=0; i<of.length; i++) {
		var o=document.createElement('input');
		o.type='text';
		o.value=i;
		of[i].appendChild(o);
	};
}
</script>
</head>
<body>
<form></form>
<form></form>
<form></form>
<form></form>
<form></form>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript