Is it possible to get the html of the page with all modifications made by the user (see below)?

For example, if text has been entered into a textarea, or a checkbox has been chosen, that should be reflected in the html as well. My reason for wanting to do this is to take a "screenshot" of the user's page.

The answers below that are a variation of jQuery('html'), do not reflect changes made by the user.

Is it possible to get the html of the page with all modifications made by the user (see below)?

For example, if text has been entered into a textarea, or a checkbox has been chosen, that should be reflected in the html as well. My reason for wanting to do this is to take a "screenshot" of the user's page.

The answers below that are a variation of jQuery('html'), do not reflect changes made by the user.

• javascript
• html
• dom

• 2 Duplicate of javascript page source code. That's the second question about this within an hour. – Felix Kling Commented Jul 3, 2013 at 15:20
• @FelixKling How is this a duplicate? The other question simply asks for the html of the page. I want text inputted in textareas, checkboxes selected, etc. to be reflected in the html – LanguagesNamedAfterCofee Commented Jul 3, 2013 at 15:22
• Ah, I missed the input-changes part. The phrase "modifications made by the user" is a rather ambiguous. DOM modifications are modifications too (which could happen in response to user interaction). – Felix Kling Commented Jul 3, 2013 at 15:24
• related: stackoverflow.com/q/11632238/218196 – Felix Kling Commented Jul 3, 2013 at 15:27
• 1 Really, an image of the page is what you where after? That has to be the poorest description of a problem in a question I've ever seen ? – adeneo Commented Jul 3, 2013 at 15:32

4 Answers 4

If you're wanting a screenshot, you should consider a tool such as html2canvas. Just pulling the HTML isn't going to get you the input fields.

Another SO thread along these lines.

Other answers will get you the HTML, specifically, but without the inputs' values

$('html').html();

You can use jQuery:

var html = $('html')

Adapting upon the other answers. Prior to obtaining the HTML, you could loop though all the input elements and manually set the value property, this would then be reflected in the HTML:

$('a').click(function(e){
    setValueProperties();
    var html = getHtml();
    alert(html);
});

function setValueProperties(){
    $('input').each(function(){
       $(this).attr("value", $(this).val()); 
    });
}

function getHtml(){
    return document.documentElement.outerHTML;
}

Here is a working example

And here is an example that supports checkboxes

NOTE: You may need to refine this function for your exact needs, but hopefully it will get you on track for what you need.

If you have a field named "field":

var field = document.getElementById("field");
fieldvalue= field.value;

If you have a checkbox, the operation is literally the same. Hope this was helpful.