Меню
Что нового?

добавление элементов

zul

zul

Новичок
добавление элементов

Есть html форма, в которое есть необходимость дублировать некоторые элементы:

<input type=text> и <select>

цель - ввести значение в них и нажав на кнопочку клонировать это поле ввода для дальнейшего ввода значений:
1: <input type=text name=t[]>
2: <input type=text name=t[]>
3: <input type=text name=t[]>

То-же самое с select'ом.

1: <select name=s[]>... options ... </select>
1: <select name=s[]>... options ... </select>
1: <select name=s[]>... options ... </select>


Смотрел на msdn методы cloneNode, AppendChild, insertBefore что-то не получается.. Может есть какое-нибудь простое решение?
 
valyala

valyala

Новичок
Смотрел на msdn методы cloneNode, AppendChild, insertBefore что-то не получается.. Может есть какое-нибудь простое решение?
Нажмите для раскрытия...
А чем тебе не нравится решение с использованием DOM? Например:

<html>
<head>
<title>test</title>

<script type="text/javascript">
// создаем select
a = document.createElement('select');
a.setAttribute('name', 's[]');
b = document.createElement('option');

// создаем массив опций в select
for (i = 0; i < 10; i++) {
c = b.cloneNode(true);
c.setAttribute('value', i);
c.appendChild(document.createTextNode(i));
a.appendChild(c);
}
obj_select = a;

// создаем input
a = document.createElement('input');
a.setAttribute('name', 't[]');
obj_input = a;
</script>

</head>

<body>

<div id="div_select"></div>
<div id="div_input"></div>

<input type="button" value="add input" onclick="document.getElementById('div_input').appendChild(obj_input.cloneNode(true))" />
<input type="button" value="add select" onclick="document.getElementById('div_select').appendChild(obj_select.cloneNode(true))" />

</body>
</html>
 
zul

zul

Новичок
Нравится! Спасибо!

-~{}~ 07.07.04 13:44:

Вот только одна загвоздочка, не могу никак, скажем добавив несколько input'ов получить значение 5го например:

alert(document.form1.t[1].value);

объект как-бы отсутствует...

при выводе document.body.innerHTML инпуты не имееют атрибута name, как это может быть?
 
valyala

valyala

Новичок
Вот только одна загвоздочка, не могу никак, скажем добавив несколько input'ов получить значение 5го например:

alert(document.form1.t[1].value);

объект как-бы отсутствует...
Нажмите для раскрытия...
А откуда ему взяться, если мы его не создавали? Значение пятого input'а можно получить так:
document.getElementById('div_input').childNodes[4].value

при выводе document.body.innerHTML инпуты не имееют атрибута name, как это может быть?
Нажмите для раскрытия...
Не верь глазам своим - просто ослик IE в некоторых случаях возвращает некорректное значение innerHTML. Чтобы в этом убедиться, посмотри, что выведет следующая строчка после того, как будет создан хотя бы один input:
alert(document.getElementById('div_input').childNodes[0].getAttribute('name'))
 
zul

zul

Новичок
Ещё один вопрос - может ли при отправке этой формы не передаваться весь массив элементов - в примере t[] ?

update:
после удаления из функции добавления элементов вот этого:
document.getElementById('quan').innerHTML+='<br>';
сразу стал передаваться весь массив элементов :(((
Как реализовать разделение input'ов и select'ов <br>'ами?

update2:
И ещё - если не разделять <br>'ами не работает вот какая часть:

a = document.createElement('input');
a.setAttribute('class', 'button');
button - в данном случае имя стиля
 
valyala

valyala

Новичок
Ещё один вопрос - может ли при отправке этой формы не передаваться весь массив элементов - в примере t[] ?
Нажмите для раскрытия...
Можно. Есть два способа:
1) перед отправкой формы устанавливать свойство disabled в false для тех элементов, которые не нужно передавать в запросе. Например,
Код: 
document.getElementById('quan').disabled = false;
После этого элемент с идентификатором quan не будет отправлен

2) создать скрытую форму с полями, которые нужно отправить. При сабмите основной формы заполнять скрытую необходимыми данными и сабмитить ее, а не основную форму. Например:
Код: 
<script type="text/javascript">
function fill_hidden_form()
{
    /* тут заполняешь поля скрытой формы и сабмитишь ее */
    document.getElementById('hidden_form').submit();
}
</script>
<!-- основная форма -->
<form ... onsubmit="fill_hidden_form();return false">
...
</form>

<!-- скрытая форма -->
<form ... style="display:none" id="hidden_form">
...
</form>
Как реализовать разделение input'ов и select'ов <br>'ами?
Нажмите для раскрытия...
Код: 
/* a - родительский объект, в который вставляешь input или
 select. Например, a = document.getElementById('div_input')
*/
a.appendChild(obj_input.cloneNode(true)); // вставляешь input
a.appendChild(document.createElement('br')); // вставляешь br
И ещё - если не разделять <br>'ами не работает вот какая часть:

a = document.createElement('input');
a.setAttribute('class', 'button');
button - в данном случае имя стиля
Нажмите для раскрытия...
Это глюк IE. Под opera и mozilla все отлично работает. Обойти глюк можно так:
Код: 
a = document.createElement('input');
a.setAttribute('class', 'button');
...
obj_main = document.getElementById('div_input');
if (document.all) obj_main.innerHTML += a.outerHTML;
else obj_main.appendChild(a.cloneNode(true));
 
zul

zul

Новичок
Хотел ещё попробовать облегчить себе жизнь и задам вопрос - можно ли как-то отличать childNodes DIV'а - просто <br>'ы тоже считают себя childNode'ами )) Понимаю, что так и должно быть...
 
Войдите или зарегистрируйтесь для ответа.
Сверху