how to obtain html page including all tags and element values using javascript

Question

i use document.documentElement.outerHTML and got everything except it does not contain the current state of all input elements (textbox, checkbox, select, radio buttons etc)

i can use jquery to obtain element values and update the html string. but i hope there is a standard way to do this. any idea?

Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
      $(function () {
          $("#me").click(function () {
           alert(  document.documentElement.outerHTML )
          });
      });

</script>

 <style type="text/css">
 </style>

</head>
<body>
 <form>       
<input id="me" type="submit" value="test" />
<input id="Text1" type="text" value="" />
</form>
</body>
</html>

if you first do each input like input.setAttribute("value", input.value), the value should show in in outerHTML. — dandavis
– dandavis, Commented Aug 1, 2013 at 3:32
At a given time, document.documentElement.outerHTML property returns the complete visual representation or state of the document. If you don't have values in the outerHTML string, it means that the value is not present on the textbox or a check box is not actually checked. — Prash
– Prash, Commented Aug 1, 2013 at 3:33
for example: i have <input type="text" value=""> i run the page and fill out the textbox with "hello". when i click submit button, i read the page using document.documentElement.outerHTML. the string contains <input type="text" value=""> but there is no "hello" in the value — bach dang
– bach dang, Commented Aug 1, 2013 at 3:42
If you have the values, you WILL get those. You can probably create a fiddle and share it so that one can take a look at the problem that you are facing. — Prash
– Prash, Commented Aug 1, 2013 at 3:46
@Prash FYI the value property is non-serializable as the value attribute corresponds to the defaultValue property. stackoverflow.com/q/11778123/1331430 — Fabrício Matté
– Fabrício Matté, Commented Aug 1, 2013 at 3:50

federicot · Accepted Answer · 2013-08-01 04:14:36Z

0

Have you tried this?

alert($('html').html());

It will alert the whole HTML element except the DOCTYPE.

answered Aug 1, 2013 at 4:14

federicot

12.3k19 gold badges71 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ToddBFisher · Accepted Answer · 2013-08-01 04:52:08Z

Judging by what you said in your comments, you really just want the key value pairs of the form submission.

I would first look into using jQuery's .serialize()

If jQuery's .serialize() isn't what you are looking for, you should be able to reference each value individually, personally I would first identify your form:

<form id="formOfStuff">

Then in pure javascript you can do something like:

var me = formOfStuff.elements["me"].value;
var text1 = formOfStuff.elements["text1"].value;
alert("me=" + me + " text1 = " + text1);

or In jQuery:

var me = $("#me").val();
var text1 = $("#text1").val();
alert("me=" + me + " text1 = " + text1);

The values you entered are part of your POST data and would also be accessible server side on whatever page you are posting to in your form's action.

Collectives™ on Stack Overflow

how to obtain html page including all tags and element values using javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related