Как вы структурируете бесконечно масштабируемую форму, используя Javascript?

У меня есть форма регистрации продукта, которая позволяет пользователю добавлять дополнительные поля продукта, нажимая «Добавить продукт». Когда пользователь нажимает добавить продукт, Javascript создает новое поле продукта в существующем div.

В настоящее время я разрешаю добавлять до 10 продуктов в форму, поэтому я настраиваю структуру div следующим образом:

<div id="product1"></div>
<div id="product2"></div>
<div id="product3"></div> etc...

У меня есть один пустой div для каждой коробки продукта, который может быть добавлен пользователем. Я использую метод Javascript innerHTML для заполнения элементов div.

На мой вопрос: как я могу разрешить одновременное добавление неограниченного количества продуктов? Очевидно, что моя текущая установка не будет поддерживать это, так как мне нужно жестко программировать отдельные div для каждого потенциального продукта, чтобы в Javascript было определенное место для размещения большего количества данных.

ПРИМЕЧАНИЕ. Прежде чем кто-либо предложит использовать один элемент div и добавить в него новые данные, это не сработает. К сожалению, все данные, введенные в предыдущих полях, очищаются всякий раз, когда в div добавляется другое поле, добавляя данные следующим образом:

document.getElementById('product').innerHTML += <input name="product"> 
12.12.2008 13:40:56
2 ОТВЕТА
РЕШЕНИЕ

Вы можете динамически добавлять больше DIVs легко. Я использую Prototype :

$("someContainerDiv").insert(new Element("div", { id: "product_"+prodId, 'class':'prod' }))

Затем вставьте содержимое $("product_"+prodId).innerHTML.

4
12.12.2008 13:47:42
Ах! Отличная идея! Могу ли я создать еще один div, просто вызвав innerHTML, чтобы написать div внутри существующего div? Будет ли это вставить новый DIV в DOM? Я не использую библиотеку JS в этом проекте.
Cory House 12.12.2008 13:57:35
Имейте в виду, что браузеры манипулируют разметкой, введенной непосредственно в innerHTML, поэтому добавление к innerHTML иногда может привести к неожиданным результатам. Просто предупредите innerHTML в IE и посмотрите, что я имею в виду :)
Jay 12.12.2008 14:18:51

У меня есть одно слово, чтобы сказать JQuery :)

Пример (для создания входных данных на лету для вашей формы):

output = '';
for(i in products){
   output += '<div id="product_' + products[i].id + '">';
   output += '<input type="text" name="products[' + products[i].id + '][name]">';
   output += '<input type="text" name="products[' + products[i].id + '][price]">';
   output += '</div>';
}
$('#products_list').append(output);
0
12.12.2008 14:05:55