Comment structurer une forme infiniment évolutive en utilisant Javascript?

Question

J'ai un formulaire d'enregistrement de produit qui permet à l'utilisateur d'ajouter des champs de produits supplémentaires en cliquant sur "ajouter un produit". Lorsque l'utilisateur clique sur ajouter un produit, Javascript crée un nouveau champ de produit dans un div existant.

Je permettent actuellement de 10 produits à ajouter sur la forme, donc je configurer une structure div comme ceci:

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

je un div vide pour chaque boîte de produit qui peut être ajouté par l'utilisateur . J'utilise la méthode innerHTML de Javascript pour peupler les divs.

Sur ma question: Comment puis-je permettre l'ajout d'un nombre illimité de produits à la fois? Évidemment, ma configuration actuelle ne supporte pas cela car j'ai besoin de coder des divs séparés pour chaque produit potentiel afin que Javascript ait un endroit spécifique pour déposer plus de données. REMARQUE: avant que quelqu'un ne suggère d'utiliser une seule div et d'y ajouter de nouvelles données, cela ne fonctionne pas. Malheureusement, toutes les données saisies dans les champs précédents sont effacées chaque fois qu'un autre champ est ajouté à la div en ajoutant des données comme ceci:

document.getElementById('product').innerHTML += <input name="product"> 

Answer 1

Vous pouvez ajouter dynamiquement plus facilement DIVs. J'utilise Prototype:

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

Ensuite, mettre votre contenu en $("product_"+prodId).innerHTML.

Answer 2

J'ai un mot à dire jQuery :)

Exemple (pour construire des entrées à la volée pour votre formulaire):

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);