JQuery & kullanarak form alanlardan değişkenler ile şablonu yüklüyor

2 Cevap php

Ben bir html şablonu üreten bir form oluşturmak için çalışıyorum. Ben sayfada gizli bir div şablonu ve şablon html ile yeni bir pencere oluşturmak için jQuery kullanıyorum, ama ben şablonu içine form alanlarının içeriğini yüklemek nasıl anlamaya olamaz. Ben muhtemelen AJAX kullanarak gerektiğini biliyorum, ama nereden başlayacağımı bilmiyorum.

2 Cevap

Bu şablonu olduğunu varsayalım:

<div class="template">
    <p class="blah"></p>
    <p class="foo"></p>
</div>

ve bu formu:

<form>
    <input name="blah" class="blah"/>
    <input name="foo" class="foo"/>
</form>

bu nedenle, bu örnek için her gelen eleman için ortak bir sınıf üzerinden şablon elemanları form elemanları bir eşleme üstlenecek:

$("form input").each(function() {
    $(".template").find("." + $(this).attr("class")).html(this.value);
});

Burada deneyin: http://jsfiddle.net/dx2E6/

Ben kullanıyorum bir hile <script type="text/html"> etiketini kullanıyor. Tarayıcı bu yüzden ne yapmam böyle bir şeydir, kodu işlemek değil:

<script type="text/html" id="template">
<div>
  <div class="some_field">{name}</div>
  <h4>{heading}</h4>
  <p>{text}</p>
</div>
</script>

Form bu gibi bir şeydir:

<form>
  <input type="text" name="name" />
  <input type="text" name="heading" />
  <input type="text" name="text" />
</form>

Sonra javascript kodu gibi bir şey olurdu:

$(document).ready(function(){

  var tpl = $('#template').html();

  $('form input').each(function(){
    tpl.replace('{'+$(this).attr('name')+'}',$(this).val());
  });

  $('div.some_destination').html(tpl);

});

Umarım yardımcı olur. Bu yöntemle ilgili daha fazla sorunuz varsa bana söyle.

etiketler