VPF::Динамическое добавление полей формы

Pena

Дата 16.8.2012, 14:56 (ссылка)

(нет голосов)

Загрузка ...

КорнеплодЪ

Профиль
Группа: Участник
Сообщений: 161
Регистрация: 20.4.2006
Где: эРэФия, аул Москв а...

Репутация: нет
Всего: нет

Здраствуйте. Задача проста: есть форма в которой необходимой динамически добавлять поля. Я это реализовал посредствам вызова функции:

Код


var i = 0;
function ЕщёПродукт(){
 Добавка = '\\r\\n <input type="text" name="Input4Text_НаименованиеПродукта_' + i + '">\\r\\n<textarea name="Textarea_ОписаниеПродукта_' + i + '"></textarea>\\r\\n<hr>';
 document.getElementById('Div_ПереченьПродукции').innerHTML += Добавка;
 i++;
}

, но всякий раз при добавлении новых полей содержимое предыдущих теряется. Как добавлять поля без зачистки предыдущих?

--------------------

Самовар по всем вопросам - сильно не ругайте

нуп

Дата 16.8.2012, 15:47 (ссылка)

(нет голосов)

Загрузка ...

Ботокодер

Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 12
Всего: 33

Код


 var el = document.getElementById('Div_ПереченьПродукции');
el.innerHTML = el.innerHTML + 'Добавка';

Pena

Дата 17.8.2012, 09:05 (ссылка)

(нет голосов)

Загрузка ...

КорнеплодЪ

Профиль
Группа: Участник
Сообщений: 161
Регистрация: 20.4.2006
Где: эРэФия, аул Москв а...

Репутация: нет
Всего: нет

А в чём разница? Попробывал и так - не работает (поля добавляются, но и предыдущие зачищаются)

--------------------

Самовар по всем вопросам - сильно не ругайте

ksnk

Дата 17.8.2012, 10:15 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Вообще-то механика работы броузера с innerHTML довольно непроста. Настолько, что у w3c многие годы бродила идея вообще выкинуть innerHTML напрочь... Так что по возможности, следует избегать использование этого метода изменения страницы.

Вот еще пара мыслей.

в форме заводится специальное метка для вставки нового элемента. К примеру - span с именем 'placetoinsertnewelements'. Тогда вставка нового элемента в новое место превращается в операцию insertBefore.
Вставляемые элементы, как правило, определенного типа и дизайна. Дизайн этот находится в html файле и правиться должен именно там, а не в Javascript'е. Так что правильнее, imho, создавать новые элементы клонируя уже существующие.
Для этого заводим специальное место в страничке, которое будет скрыто от просмотра и в нем разместим необходимые нам заготовки элементов.

Код


<form id="justaform"...>

<input ...>
<textarea ... >

<span id="placetoinsertnewelements"></span>
</form>

<!-- clone factory -->
<div style="display:none;">

<input id="input_template">
<textarea id="textarea_template"></textarea>
</div>

Код


function append_element(template, attr){
   var    element = document.getElementById(template).cloneNode(true);
   element.removeAttribute('id');
   if(attr && typeof(attr)=='object'){
            for (var a in attr) {
               element.setAttribute(a,attr[a])
            }
   }

    return document.insertBefore(document.getElementById('placetoinsertnewelements'),element);
}


append_element('input_template',{name:'new_picture'});

Это сообщение отредактировал(а) ksnk - 17.8.2012, 10:57

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

нуп

Дата 17.8.2012, 10:19 (ссылка)

(нет голосов)

Загрузка ...

Ботокодер

Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 12
Всего: 33

Та ладно зачищаются, пример выложите

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »