powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / (JS) Создание елементов формы
38 сообщений из 38, показаны все 2 страниц
(JS) Создание елементов формы
    #36176475
Туплю и никак не могу найти в инете информацию о создании элементов формы методами Javascrip.
Киньте ссылочку, пожалуйста, на полезный ресурс.
(В частности, нужно создать в форме элемент textarea, но т.к. создавать нужно будет элементы практически всех типов, то и информация нужна, как можно более полная).
...
Рейтинг: 0 / 0
(JS) Создание елементов формы
    #36176491
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Например так:
Код: plaintext
1.
document.forms[...].innerHTML+="<textarea></textarea>";
Или так:
Код: plaintext
1.
document.forms[...].appendChild(document.createElement("textarea"));
...
Рейтинг: 0 / 0
(JS) Создание елементов формы
    #36176513
ShSerge,

Спасибо, второй вариант предпочтительнее, но нужно и имя и параметры, затем, присваивать.
Т.е. какой-то доступ к создаваемому элементу иметь.
...
Рейтинг: 0 / 0
(JS) Создание елементов формы
    #36176524
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Код: plaintext
1.
2.
3.
4.
5.
var t=document.createElement("textarea");
t.style.backgroundColor="blue";
//или таr:
t.setAttribute("style","color:red;height:100px;width:100px", 0 );
document.forms[...].appendChild(t);
...
Рейтинг: 0 / 0
(JS) Создание елементов формы
    #36176535
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Забыл про
Код: plaintext
t.name="..."; и t.id="...";
...
Рейтинг: 0 / 0
(JS) Создание елементов формы
    #36176582
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
итого, обобщим:
Код: plaintext
1.
2.
3.
4.
5.
6.
var oForm = document.getElementById('...');
var newInput = document.createElement('input'); //или 'textarea', или 'select'
newInput.type = 'text'; //'hidden','checkbox','submit',.... - для <input>
newInput.name = '...';
//и т.д., присваиваем если надо id, class, style, value, onclick,....
oForm.appendChild(newInput);
Отличия возникнут при добавлении селектов (нужно будет еще опшены в него добавить, поищите по форуму примеры с 'new Option'). Также возможен сюрприз при попытке создания многострочного селекта в ИЕ. Для textarea еще cols и rows зададите.
...
Рейтинг: 0 / 0
(JS) Создание елементов формы
    #36176693
illion,

Спасибо!
Буду копать :)
...
Рейтинг: 0 / 0
(JS) Создание елементов формы
    #36176944
Дмитрий-(сколько-же-нас?),
Пытаюсь "скопом" дописать в тег функции js:
Код: plaintext
input_data_structure[i].actions = "onfocus='check_value(this);' onblur='check_value(this);' onchange='analisys_change(this);'"
написал так:
Код: plaintext
1.
2.
3.
newElement.name = newElement.id = i;
newElement.value = input_data_structure[i].value;
document.forms[ 0 ].appendChild(newElement);
document.forms[ 0 ].i.innerHTML = input_data_structure[i].actions;
-- ругается, что document.forms[0].i не имеет свойств (i -- имя и идентификатор тега)
Что же, каждое событие отдельно прописывать?
...
Рейтинг: 0 / 0
(JS) Создание елементов формы
    #36176979
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Это потому что i - у Вас скалярная величина (строковая), а не объект.
...
Рейтинг: 0 / 0
(JS) Создание елементов формы
    #36177010
ShSerge,

Т.е.
Код: plaintext
document.forms[ 0 ].table_field.innerHTML=...
-- будет работать,
а
Код: plaintext
1.
i = 'table_field';
document.forms[ 0 ].i.innerHTML =...
-- не будет?

Попробовал:
Код: plaintext
1.
2.
3.
...
newElement.onFocus = input_data_structure[i].actions.onfocus;
document.forms[ 0 ].appendChild(newElement);
-- не работает (не вызывает функцию)
...
Рейтинг: 0 / 0
(JS) Создание елементов формы
    #36177103
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Дмитрий-(сколько-же-нас?)Дмитрий-(сколько-же-нас?),
Пытаюсь "скопом" дописать в тег функции js:
Код: plaintext
input_data_structure[i].actions = "onfocus='check_value(this);' onblur='check_value(this);' onchange='analisys_change(this);'"
написал так:
Код: plaintext
document.forms[ 0 ].i.innerHTML = input_data_structure[i].actions;
Попробуйте так:

Код: plaintext
1.
2.
3.
4.
5.
input_data_structure[i].actions = {onfocus:'check_value(this);', onblur:'check_value(this);', onchange:'analisys_change(this);'};

...

var ac = input_data_structure[i].actions;
for(var o in ac) { newElement.setAttribute(o, ac[o]); }
...
Рейтинг: 0 / 0
(JS) Создание елементов формы
    #36177158
Яростный Меч,

Попробовал проще:
Код: plaintext
1.
2.
3.
4.
var newElement = document.createElement('textarea');
     newElement.name = newElement.id = i;
     newElement.value = input_data_structure[i].value;
     newElement.setAttribute('onfocus', 'check_value(this, "<Paste table of data here...>");');
     document.forms[ 0 ].appendChild(newElement);
Функция не вызывается :(
...
Рейтинг: 0 / 0
(JS) Создание елементов формы
    #36177272
Попробовал ещё проще:
Код: plaintext
1.
2.
3.
4.
var newElement = document.createElement('textarea');
     newElement.name = newElement.id = i;
     newElement.value = input_data_structure[i].value;
     newElement.onFocus = "alert('!')";
     document.forms[ 0 ].appendChild(newElement);
-- никакой реакции!
...
Рейтинг: 0 / 0
(JS) Создание елементов формы
    #36177330
Удивительно, но заработал только один способ, взятый отсюда:
http://forum.ru-board.com/topic.cgi?forum=31&topic=13752

Код: plaintext
newElement.onfocus = new Function( input_data_structure[i].actions.onfocus );

Респект, webdeveloper!
...
Рейтинг: 0 / 0
(JS) Создание елементов формы
    #36177332
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Дмитрий-(сколько-же-нас?)Попробовал ещё проще:
Код: plaintext
newElement.onFocus = "alert('!')";
-- никакой реакции!
Код: plaintext
1.
newElement.onfocus = function(e){alert('!');}
...
Рейтинг: 0 / 0
(JS) Создание елементов формы
    #36177340
Яростный Меч,

Пробовал:
Код: plaintext
newElement.onfocus = function (e) { input_data_structure[i].actions.onfocus; };
-- не работает!
...
Рейтинг: 0 / 0
(JS) Создание елементов формы
    #36178009
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
очевидно, input_data_structure[i].actions.onfocus представляет собой строковое значение. Поэтому не работает function(){} (требующий указания последовательности команд) и работает конструктор new Function (требующий строковый агрумент). Если все работает, то оставьте как есть, но учтите, что вариант function(){} предпочтительнее, т.к. поможет избежать проблем с областью видимости переменных. Сравните:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
<html>
<head>
<script>
function init() {
var test = '123';
document.getElementById('button1').onclick = new Function('alert(test)');
document.getElementById('button2').onclick = function(){alert(test);}
}
</script>
</head>
<body onload="init()">
<button id='button1'>test 'new Function'</button>
<button id='button2'>test 'function(){}'</button>
</body></html>
...
Рейтинг: 0 / 0
(JS) Создание елементов формы
    #36178365
illion,

Спасибо за пример!
Очень философский...
Буду учитывать эти нюансы.
...
Рейтинг: 0 / 0
(JS) Создание елементов формы
    #36183613
Создаю отмеченный по-умолчанию checkbox:
Код: plaintext
newElement.checked = true;
FF -- понимает
IE -- нет

Почему???
...
Рейтинг: 0 / 0
(JS) Создание елементов формы
    #36184099
Вариант
Код: plaintext
newElement.setAttribute(p, input_data_structure[i].parameters[p]);
где p='checked', а input_data_structure[i].parameters[p]='true'
даёт тот же результат :(
...
Рейтинг: 0 / 0
(JS) Создание елементов формы
    #36184824
Фотография Ex_Soft
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Дмитрий-(сколько-же-нас?)Создаю отмеченный по-умолчанию checkbox
тынць
...
Рейтинг: 0 / 0
(JS) Создание елементов формы
    #36185038
зы
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
illion, переезжай в питер, запарился уже толкового девелопера на клиентсайд искать :)
...
Рейтинг: 0 / 0
(JS) Создание елементов формы
    #36185044
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
зыillion, переезжай в питер, запарился уже толкового девелопера на клиентсайд искать :)
Ну да. Переезжай (ух-ты слово-то какое трудное). Питер нынче рулит!
...
Рейтинг: 0 / 0
(JS) Создание елементов формы
    #36185055
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
зызапарился уже толкового девелопера на клиентсайд искать :)хм...
а что, JS-прогеров не хватает даже в нынешнее кризисное время?
...
Рейтинг: 0 / 0
(JS) Создание елементов формы
    #36185076
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Яростный Меч,

А их вообще никогда не хватает. Например, пхп-шники. Некоторые даже не знают про яваскрипт (не буду скрывать, где я это слышал - "ТопПлан", карты Москвы, СПб и т.д. делают). Или аспнетчики, для которых писать код на яваскрипте - западло (есть готовые компоненты или нахаляву, или забабло). "Мы занимаемся бизнес-логикой", типа, причём, не умея элементарное соединение таблиц в БД нарисовать.
...
Рейтинг: 0 / 0
(JS) Создание елементов формы
    #36186058
зы
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Яростный Мечзызапарился уже толкового девелопера на клиентсайд искать :)хм...
а что, JS-прогеров не хватает даже в нынешнее кризисное время?
они все какие-то унылые и, как правило, если пишут что они круты, на деле оказывается что дальше jquery/prototype никуда не уходили и основы самого языка понимают достаточно мутно. Я как только вижу в резюме только эти два слова, сразу общаться уже и не хочется.
...
Рейтинг: 0 / 0
(JS) Создание елементов формы
    #36190919
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
зыони все какие-то унылые
да, к сожалению это очень точно. На прошлой неделе приходил на собеседование "программист", весь такой деловой, уверенный, показал даже диплом, в котором написано, что он инженер-программист и оценки все 4-5, но буквально через пять минут допроса признался, что спец он хреновый и на самом деле хочет железом заниматься, если уж придется в ИТ работать... Нафига ВУЗы такое Г выпускают...

Спасибо за приглашение еще раз (помню звал уже когда-то) :-) . Пока отрабатываю хороший контракт, з/ и условия весьма приятные, только городишко скучноватт... Посмотрим, как дальше сложится.
...
Рейтинг: 0 / 0
(JS) Создание елементов формы
    #36192142
зы
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
жаль, а то мне сейчас надо :) кстати, просто ради инфы, кинь на почту в профиле сколько предлагают денег программисту твоего уровня в скучноватом городишке :) может мы тебе столько и не дадим и нет смысла звать :)
...
Рейтинг: 0 / 0
(JS) Создание елементов формы
    #36192154
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
зыжаль, а то мне сейчас надо :) кстати, просто ради инфы, кинь на почту в профиле сколько предлагают денег программисту твоего уровня в скучноватом городишке :) может мы тебе столько и не дадим и нет смысла звать :)
Дык, возьми и нопешы, сколько предлагаешь. Ато ...на почту..., ...в профиле... .
ПС. Петербург - не Москва, много не платят. Программистам - меньше, а почему-то начальникам - больше. Хотя, если подумать, начальников - как грязи, а программистов... .
Пардон, пятница.
...
Рейтинг: 0 / 0
(JS) Создание елементов формы
    #36192313
зы
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
ну тут и жить не так дорого как в москве :) все определяется ценами в конкретном месте. ну и насчет начальников не уверен что как грязи, да и не думай что быть начальником так легко и они нахаляву денег гребут :) приходится работать на 30% больше чем программисты, всем ипать мозг каждую минуту, чтобы что-то происходило, держать в голове загрузку каждого и то над чем они работают, одновременно думать над развитием проекта, разрабатывать идеи по новому функционалу и, главное, получать все шишки и отчитываться начальству выше. В то время как простые программисты фигарят свой кусок кода с утра до вечера и жалуются, если им дашь одновременно слишком много или будешь отвлекать срочными вопросами.
...
Рейтинг: 0 / 0
(JS) Создание елементов формы
    #36192395
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Н-да, интересная темка ... мы не местные, но все же интересно - сколько нынче платят и сколько получают как в столицах, так и в "унылых городишках" ... хотя бы порядок цен ... Ужасть, как интересно.
...
Рейтинг: 0 / 0
(JS) Создание елементов формы
    #36233132
Ex_SoftДмитрий-(сколько-же-нас?)Создаю отмеченный по-умолчанию checkbox
тынць
Неужто получается, что с input-ами типа radio и checkbox невозможно нормально работать через appendChild?
У меня весь интерфейс из структурированного массива формируется, а для checkbox-а придётся отдельную "процедуру" прописывать?
...
Рейтинг: 0 / 0
(JS) Создание елементов формы
    #36234639
До радио-батонов, пока, не дошёл.
А вот с checkbox-ами получилось!
Из структуры:
Код: plaintext
1.
2.
3.
4.
5.
 'with_signes' => array(
                   'control'    => 'input',
                   'attributes' => array(
                                    'type' => 'checkbox'
                                              )
                              )
Создаётся элемент input:
Код: plaintext
element = dom.add.element( id_structure[i].control );
А тип задаётся через атрибуты:
Код: plaintext
for (var p in id_structure[i].attributes) element.setAttribute(p, id_structure[i].attributes[p]); 
Очень всё стабильно работает.
Пока, правда, с checked не очень понятно: как атрибут он работает только в FF, а как innerHTML для input-а "вырубает" элемент в IE напрочь :(
...
Рейтинг: 0 / 0
(JS) Создание елементов формы
    #36236347
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
озадачилась вопросом. Оказывается ИЕ, поганец, выставляет checked для чекбоксов только в том случае, если он уже в странице (получается, сначала - appendChild, а потом уже checked. С другой стороны, сначала нужно type задать, а потом только appendChild применять, иначе он матюкается). Это еще можно как-то решить с помощью костыля (см. код). С радиобаттонами пока не понятно - созданные из js элементы в ИЕ невозможно установить в checked даже мышекликом. Опять какая-то байда от ИЕ...

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
<script>
var obj = {
	 obj1 : {control:'input', attributes: {type:'checkbox', name:'123', checked: 1 } }
	,obj2 : {control:'input', attributes: {type:'checkbox', name:'456'} }
	,obj3 : {control:'input', attributes: {type:'radio', name:'abc', checked: 1 } }
	,obj4 : {control:'input', attributes: {type:'radio', name:'abc'} }
};
function drawObj()
{
	for (var i in obj)
	{
		var newEl = document.createElement(obj[i]['control']);
		for (var attr in obj[i]['attributes'])
		{
			newEl[attr] = obj[i]['attributes'][attr];
		}
		document.getElementById('test').appendChild(newEl);
		if (obj[i]['attributes']['checked']) newEl.checked = true;
	}
}
</script>
<div id="test"></div>
<button onclick="drawObj()">test</button>
...
Рейтинг: 0 / 0
(JS) Создание елементов формы
    #36236349
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
illionозадачилась вопросом. Оказывается ИЕ, поганец, выставляет checked для чекбоксов только в том случае, если он уже в странице (получается, сначала - appendChild, а потом уже checked. Кстати да.
Тоже на такое натыкался
...
Рейтинг: 0 / 0
(JS) Создание елементов формы
    #36236837
зы
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
спешл фор ИЕ

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
<script>
var obj = {
	 obj1 : {control:'input', attributes: {type:'checkbox', name:'123', defaultChecked:true} }
	,obj2 : {control:'input', attributes: {type:'checkbox', name:'456'} }
	,obj3 : {control:'<input name="abc">', attributes: {type:'radio', defaultChecked:true} }
	,obj4 : {control:'<input name="abc">', attributes: {type:'radio'} }
};
function drawObj()
{
	for (var i in obj)
	{
		var newEl = document.createElement(obj[i]['control']);
		for (var attr in obj[i]['attributes'])
		{
			newEl.setAttribute(attr, obj[i]['attributes'][attr],  0 );
		}
		document.getElementById('test').appendChild(newEl);
	}
}
</script>
<div id="test"></div>
<button onclick="drawObj()">test</button>
а вообще лучше использовать наработки в библиотеках
...
Рейтинг: 0 / 0
(JS) Создание елементов формы
    #36236844
зы
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
разгадко:
http://msdn.microsoft.com/en-us/library/ms534184(VS.85).aspx
автор Internet Explorer 8 and later can set the NAME attribute at run time on elements dynamically created with the createElement method. To create an element with a NAME attribute in earlier versions of Internet Explorer, include the attribute and its value when using the createElement method.
...
Рейтинг: 0 / 0
(JS) Создание елементов формы
    #36237067
зыспешл фор ИЕ
Код: plaintext
 defaultChecked:true


Спасибо!

(Как уже достал этот IE со своими выпендрёжами...)
...
Рейтинг: 0 / 0
38 сообщений из 38, показаны все 2 страниц
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / (JS) Создание елементов формы
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]