Javascript: преобразовать форму в статическую

Question

Я работаю над онлайн-приложением, которое использует множество форм, подобных этой:

<form action="..." id=".." method="post">
 <label for="i0">something</label>
 <input type="text" id="i0" .... />

 <label for="i1">something</label>
 <select id="i1"..> <option>a</option> <option>b</option> </select>
 .....
 <input type="submit" ...>
</form>

Я использую некоторые плагины JQuery для сериализации и десериализации данных, чтобы я мог сохранить все данные в базе данных в одной строке JQuery и заполнить форму другой инструкцией. Моя проблема сейчас в том, что в каком-то контексте мне нужно показывать только данные, а не редактируемую форму.

Вопрос: есть ли какой-нибудь плагин JQuery или какой-то код, который преобразует <form> в текстовые данные, сохраняющие структуру формы?

Примечание: простой вариант - показать форму и отключить все поля формы, но это не очень хороший вариант, если пользователь хочет распечатать данные.

Answer 1

var html = '';
var $form = $('#form');
$form.find('label').each(function() {
  var $label = $(this);
  html += '<p>' + $label.text() + ': ' + $('#' + $label.attr('for')).val() + '</p>';
})
$form.replaceWith('<div>' + html + '</div>');

Answer 2

Я бы предложил немного другое, но, кажется, более подходящее решение - jQuery Templates

Вы сохраняете свой общий код в качестве шаблона, в зависимости от реальных потребностей, вы оборачиваете эти шаблоны либо в <forms>, либо в <div>. Это более понятно и легко поддерживать.

Answer 3

Вот обходной путь, не связанный с jquery:

var getOuterHtml = function(node){
    var wrapper = document.createElement('div');
    document.body.appendChild(wrapper);
    var clone = node.cloneNode(true);
    wrapper.appendChild(clone);
    var result = wrapper.innerHTML;
    document.body.removeChild(wrapper);
    return result;  
};

Здесь - рабочий пример.

P.S. Кстати в ie вы можете использовать node.outerHTML.

РЕДАКТИРОВАТЬ: немного измененный пример, чтобы он не удалял исходную форму

Answer 4

Если вы делаете это при отправке, вы можете использовать плагин формы jQuery и функцию formSerialize () или обратный вызов beforeSubmit ().

var queryString = $('#myFormId').formSerialize();

или

$("#myFormId").ajaxForm({
  beforeSubmit: function(arr, $form, options) {
          // The array of form data takes the following form: 
          // [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ] 

          // return false to cancel submit                  

          return true;
  },
  success: function() { 
          //success (your actions here)
  }
});

(используйте форму $).