Javascript get html of current page

Question

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.

Duplicate of [javascript page source code](http://stackoverflow.com/q/1367587/218196). That's [the second question](http://stackoverflow.com/q/17450681/218196) about this within an hour. — Felix Kling, Jul 03 '13 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, Jul 03 '13 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, Jul 03 '13 at 15:24
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, Jul 03 '13 at 15:32
@adeneo I guess `to take a "screenshot" of the user's page` is a bad description? — LanguagesNamedAfterCofee, Jul 03 '13 at 15:39
Not really, but `"Javascript get html of current page"` surely is. — adeneo, Jul 03 '13 at 15:41

score 8 · Accepted Answer · edited May 23 '17 at 12:01

8

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

edited May 23 '17 at 12:01

Community

1
1

answered Jul 03 '13 at 15:27

Richard

6,215
4
33
48

Thanks, although html2canvas is pretty heavy, I guess it can't be helped. – LanguagesNamedAfterCofee Jul 03 '13 at 15:30

score 5 · Answer 2 · answered Jul 03 '13 at 15:11

5

You can use jQuery:

var html = $('html')

answered Jul 03 '13 at 15:11

Rene Pot

24,681
7
68
92

What more to give than just this? – Rene Pot Jul 03 '13 at 15:12
@MohammadAreebSiddiqui : This one line is actually the demo... no ? – Laurent S. Jul 03 '13 at 15:12
4

hmmmm... looks complicated. Is there a simpler method? – musefan Jul 03 '13 at 15:12
@musefan : do I feel sarcasm ? ;-) – Laurent S. Jul 03 '13 at 15:13
1

@musefan : Yes, you could reduce the number of characters used for the var :) – Christopher Thrower Jul 03 '13 at 15:14
5

This doesn't work. For example if I have text in a textarea, it is not reflected in the html. – LanguagesNamedAfterCofee Jul 03 '13 at 15:19
3

@LanguagesNamedAfterCofee - no it's not, the value attribute in the markup is not updated when the user types something, the value property is, so if your goal is to get user inputted text from form elements, getting the markup of the entire page is ***not*** the way to do it. – adeneo Jul 03 '13 at 15:20

musefan · Answer 3 · 2013-07-03T15:38:49.443

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.

score -1 · Answer 4 · answered Jul 03 '13 at 15:14

-1

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.

answered Jul 03 '13 at 15:14

JonLeslieHarding

135
1
8

Javascript get html of current page

4 Answers4