Question

Im trying to grab the entire DOM from a page using

document.getElementsByTagName('html')[0].innerHTML

but I noticed that it does not get the current values for any inputs, textareas, selects, etc…

Is there a way that I can grab their current values as well? essentially I want to take a snapshot of the page in its current state.

I have looked at .each and .serialize in JQuery, but it seems like both are not ideal solutions..

Answer 1

First move the values of all form inputs to the value attribute :

$(':input').each(function(){
    $(this).attr('value', this.value);
});

Then use your code:

document.getElementsByTagName('html')[0].innerHTML
// Or the jQuery way:
$('html').html()

Live DEMO