JavaScript DOM dynamc Form from PHP

Question

내 MySQL 데이터베이스는 <select>에 항목 목록 (및 정수 ID 포함)을 제공하고 웹 양식 (수량은 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[0]과 p[1] 등의 이름을 부여합니다)

아무도 도와 줄 수 있습니까?

Answer 1

가장 간단한 것은 노드가 이미 document.createElement() 또는 innerHTML를 통해 새로운 DOM을 만드는 반대로 (필요한만큼 여러 번이를 복제하는 것입니다.

는 서라운드, 시작하려면 당신이 사업부와 <select> 및 <input> 기존 .

: 템플릿을 시간의 일부 N 번호를 복제하는 함수를 작성 지금

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

: 잘 알려진 ID는 또한,에 반복 입력을 넣어 다른 DIV를 추가 할

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