Question

I’m working on an online application that uses a lot of forms like this:

<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>

I use some JQuery plugins to serialize and deserialize data so I can save all data to database in one JQuery line and fill form with another instruction. My problem now is that in some context I need to show only the data, not editable form.

The question is: is there any JQuery plugin or some code that converts a <form> into a textual data preserving the form structure?

Note: a simple option is to show the form and disable all form fields, but this is not a good option if the user wants to print the data.

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