Загрузка шаблона с переменными из полей формы с использованием jQuery & php

Question

Я пытаюсь создать форму, которая генерирует HTML-шаблон. У меня есть шаблон в скрытом элементе div на странице, и я использую jQuery для создания нового окна с шаблоном html, но я не могу понять, как загрузить содержимое полей формы в шаблон. Я знаю, что, вероятно, должен использовать AJAX, но я не знаю, с чего начать.

Answer 1

Я использовал один трюк с тегом <script type="text/html">. Браузер не отображает код, поэтому я делаю что-то вроде этого:

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

Ваша форма выглядит примерно так:

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

Тогда ваш код javascript будет выглядеть примерно так:

$(document).ready(function(){

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

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

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

});

Надеюсь, это поможет. Скажите, если у вас есть дополнительные вопросы относительно этого метода.

Answer 2

Предположим, у вас есть этот шаблон:

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

и эта форма:

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

Итак, для этого примера мы предполагаем отображение элементов формы на элементы шаблона через общий класс для каждого соответствующего элемента:

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

Попробуйте здесь: http://jsfiddle.net/dx2E6/