PHP, JavaScript DOM dynamc Formu

1 Cevap php

Benim MySQL Veritabanı, bir <select> in (onlarla ve tamsayı kimlikleri) öğelerin bir listesini sağlar ve benim web formunda kullanımı için bir Adet Adet alan (tarzı ile display: none bu yüzden gizlidir). Fakat: - nasıl dinamik birden seçer yapabilirsiniz ben kullanıcı kaç seçenek o formda girmek istiyor bu tip seçmek mümkün olmak istiyorum?

Örnek: envanterinde ürünler portakal, muz ve şeftali vardır. Bir select tag var:

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

Şimdi kullanıcı bir, iki veya üç ürün sınıfları sipariş arasındaki seçti sağlayan başka açılan eklemek istiyorum. o 2 seçebilir ve o iki ürün seçimleri ve miktarları girebilirsiniz böylece yukarıdaki kodu iki nüsha DOM eklenir. (Komut onlara adlarını p[0] ve p[1] vb verecek)

Herkes burada bana yardımcı olabilir?

1 Cevap

Basit şey gerektiği gibi document.createElement() veya innerHTML ile yeni DOM oluşturma aksine zaten (gibi birçok kez düğümleri klonudur.

Tanınmış bir kimliği olan bir div ile başlatmak mevcut <select> çevreleyen ve <input> için. Ayrıca, içine tekrarlanan girişleri koymak için başka bir DIV eklemek istiyorum:

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

Şimdi, şablonu zamanlarda bazı N sayısı çoğaltılacak bir işlev oluşturun:

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