JavaScript DOM dynamc Form from PHP

Question

Моя база данных MySQL предоставляет список элементов (и целочисленные идентификаторы с ними) в поле <select> и поле qty для использования в моей веб-форме (со стилем display: none, поэтому он скрыт). Но: я хочу, чтобы пользователь мог выбрать, сколько вариантов такого типа он хочет ввести в форму - как я могу динамически делать несколько выборок?

Пример: Продукты в инвентаре - апельсины, бананы и персики. Существует один выберите тег:

<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]" /> 

Теперь я хочу добавить еще один выпадающий список, позволяющий пользователю выбирать между заказав один, два или три класса продуктов. он мог выбрать 2, а затем две копии вышеуказанного кода вставляются в DOM, чтобы он мог ввести два варианта продукта и количества. (сценарий дал бы им имена и p[1] и т. д.)

Может ли кто-нибудь помочь мне здесь?

Answer 1

Проще всего клонировать узлы у вас уже есть столько раз, сколько необходимо (в отличие от создания нового DOM через document.createElement() или innerHTML.

Для начала окружать существующую <select> и <input> с DIV, который имеет . известный ID Кроме того, вы хотите добавить еще один DIV поставить повторные входы в:

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

Теперь создадим функцию, которая будет тиражировать шаблону некоторое 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); 
    } 
}