JavaScript DOM dynamc Formulaire de PHP

Question

Ma base de données MySQL fournit une liste d'éléments (et les ID entiers avec eux) dans un <select> et un champ de quantité pour utilisation sur mon formulaire Web (avec le style display: none afin qu'il soit caché). Mais: Je veux que l'utilisateur soit capable de sélectionner combien de choix de ce type il veut entrer dans le formulaire - comment puis-je faire plusieurs sélections de façon dynamique? Exemple: Les produits de l'inventaire sont des oranges, des bananes et des pêches. Il y a une balise select:

<select name="p[0]"> 
    <option value="2">Orange</option> 
    <option value="23">Banana</option> 
    <option value="31">Peach</option> 
</select> 
QTY <input type="text" name="qty[0]" /> 

Maintenant, je veux ajouter un autre menu déroulant permettant à l'utilisateur de choisir entre la commande d'un, deux ou trois catégories de produits. il pouvait choisir 2, puis deux copies du code ci-dessus sont insérées dans le DOM afin qu'il puisse saisir deux choix de produits et quantités. (Le script leur donnerait les noms p[0] et p[1] etc.)

Quelqu'un peut-il m'aider ici?

Answer 1

La chose la plus simple est de cloner les noeuds que vous avez déjà autant de fois que nécessaire (par opposition à la création de nouveaux DOM via document.createElement() ou innerHTML.

Pour commencer, entourer votre <select> et <input> existant avec un div qui a . une pièce d'identité bien connue, vous voulez aussi ajouter un autre DIV pour mettre les entrées répétées dans:

<div id="template"> 
    <select name="p[0]"> ... </select> 
    QTY: <input name="qty[0]"/> 
</div> 
<div id="copies"> 
</div> 

maintenant, créez une fonction qui reproduira le modèle un certain nombre de fois N:

function makeCopies(num) { 
    var template = document.getElementById('template'); 
    var output = document.getElementById('copies'); 

    // Delete existing nodes. 
    output.innerHTML = ''; 

    // We start with 1, not 0, because we already have the template. 
    for (var i = 1; i < num; i++) { 
    var copy = template.cloneNode(true); 
    // Change the input names according to index. 
    copy.getElementsByTagName('select')[0].name = 'p[' + i + ']'; 
    copy.getElementsByTagName('input')[0].name = 'qty[' + i + ']'; 
    output.appendChild(copy); 
    } 
}