powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / (JS) Создание елементов формы
25 сообщений из 38, страница 1 из 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
25 сообщений из 38, страница 1 из 2
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / (JS) Создание елементов формы
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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