Nasıl form alanlarını çoğaltmak için Javascript kullanabilirim?

4 Cevap php

Örneğin, ben şöyle bir html formu olmasını istiyorsanız:

<table>
  <tr>
     <td>Field A:</td>
     <td><input type='text' name='fielda[1]'></td>
     <td>Field B:</td>
     <td><textarea name='fieldb[1]'></textarea></td>
  </tr>
</table>

Ne istiyorum şeklinde yukarıda benim tamamını çoğaltan bir düğme eklemek için, ama tüm alanları için bir 2 1 değiştirir. Bir alan, ama table.There dahil kodunun bölümün tamamı değil, sadece ben de yayınlanmıştır olanlardan daha fazla / farklı alanlar olacaktır.

Ben zaten ihtiyacım tam olarak ne yapar, hangi bu çözümü denedim:

http://www.quirksmode.org/dom/domform.html

Test etmek için kod örnekleri kopyalarken Ama nedense, işlevselliği çoğaltmak olamazdı. Ben bile tam anlamıyla boşuna ile çalışmak için tüm sayfa kaynağını kopyalama çalıştı.

4 Cevap

Bunu yapar supplant denilen bir tekniği var. Ben Douglas Crockford yaptığını düşünüyorum, bunu yazmadım. Ama bunu teklif edeceğiz:

Şimdi JavaScript program verileri aldı ki, onunla ne yapabilirim? Basit şeylerden biri, istemci tarafında HTML nesil.

var template = '<table border="{border}"><tr><th>Last</th><td>{last}</td></tr>' +
   '<tr><th>First</th><td>{first}</td></tr></table>';

Biz de üç değişkenli bir HTML şablonu var dikkat edin. Sonra değişkenleri uyan üyeler içeren bir JSON nesnesi elde edeceğiz.

var data = { 
    "first": "Carl", 
    "last": "Hollywood",    
    "border": 2 
};

Daha sonra verileri ile şablonu doldurmak için bir ayağını kaydırmak yöntemi kullanabilirsiniz.

mydiv.innerHTML = template.supplant(data);

JavaScript dizeleri yerini yöntemi ile gelmiyor, fakat JavaScript bizi onlara ihtiyacımız özelliklerini vererek, yerleşik türlerini artırmak için olanak sağlar, çünkü bu ok.

String.prototype.supplant = function (o) { 
    return this.replace(/{([^{}]*)}/g, 
        function (a, b) {  
            var r = o[b];
            return typeof r === 'string' ? 
                r : a; 
        }
    ); 
};

Dan http://www.json.org/fatfree.html

Ben bir şablon bu dağınık değişken atama önlemek için gördüğüm bir tekniği yapmak için:

<script id="rowTemplate" type="text/html">
  <tr>
     <td>Field A:</td>
     <td><input type='text' name='fielda[{id}]'></td>
     <td>Field B:</td>
     <td><textarea name='fieldb[{id}]'></textarea></td>
  </tr>
</script>

GetElementById ile başvurmak gibi bu yazma çok güzel kod izin verir.

Yani sizin durumunuzda, yerine bir JSON nesnesi ile doldurma yerine, sadece id eklemek ve değiştirmek gerekir ancak birçok satır üzerinden bakmak istiyorum.

Eğer bağlantı vardır örnek, bir şablon olarak kullanılan formun gizli bir sürümü de vardır. Bu şablon, bir ID (readroot), bu kadar kolay bir (getElementById) daha sonra klonlanır (node.cloneNode()) ve yukarıdaki DOM enjekte seçilmelidir sağlar sahiptir ( kaynakta node.insertBefore()) ikinci bir işaretçi (writeroot).

Duplikasyonlarının sayısı değişken muhasebeleştirilir tutulur counter. Onun 'içeriği her klonlama (artırılır) güncellenir, ve onun' değerini daha sonra klonlanmış düğüm tüm alan adları eklenir. (Orijinal şablon-düğümlerin alanlar hiçbir sayısal soneki.)

Bu sadece web sayfasının baş kısmında javascript çalışma, gerçekten çok basit. Eğer anlayamıyorum parçaları google, ve sizin için aradığınız ne elde edecek ve süreç içinde bazı öğreneceksiniz. Kar!

Bazı önerilen gibi ben, sen jQuery gibi kütüphanede çeşit kullanmak gerektiğini düşünüyorum. Bu kapalı ödeyeceğim.

IE (tüm sürümler bildiğim kadarıyla) kullanarak bir şablon yapma ve javascript bunu klonlama ile ilgili bazı sorunlar var. Örneğin çoğaltarak IE 'isim' özelliği herhangi proğramsal değişiklikleri göz ardı edecek Bir formda radyo düğmelerini. Eğer radyo düğmeleri için özel olay işleyicileri oluşturabilirsiniz sürece (örneğin bir bölümünde bir düğmesini kontrol kontrolsüz olmak için başka bir bölümünde bir düğme neden olacaktır) bölümler boyunca onları kopyalamak beklendiği gibi Yani, onlar işe yaramaz.

Hata, yanlış soru okudum. Bu daha iyidir:

function duplicate(frm) {
  newfrm = $(frm).clone();
  $(newfrm).each(function(i,o) {
     if (o.name != null) { // or if ($(o).attr("name"))
       o.name = replaceIndex(o.name);
     }
  });
  $(frm).parent().append(newfrm);
}

Not sure about actual syntax. E.g. how do you test for attribute presence. Easy to find in google, though. Here replaceIndex(string) uses lastIndexOf() to find last [x] and replace it to [x+1].