I need to get the HTML of the whole page, with the current values of all inputs in their value="...".

I've tried this:

document.getElementById("htmlId").innerHTML;

and this:

$('html').html();

but the both return the HTML page but without the input values.

_{I know that this looks like this other question, but it is not the same. I really need get the HTML with the value attributes.}

I need to get the HTML of the whole page, with the current values of all inputs in their value="...".

I've tried this:

document.getElementById("htmlId").innerHTML;

and this:

$('html').html();

but the both return the HTML page but without the input values.

_{I know that this looks like this other question, but it is not the same. I really need get the HTML with the value attributes.}

• javascript
• jquery
• html

• May be my english is not good !but what you need ? when is try "document.getElementById("html").innerHTML;" i was get the value of html tag – alalalala Commented Jun 9, 2017 at 7:09
• $('#html').html(); needs # to identify as ID..add html mark up to see the problem – guradio Commented Jun 9, 2017 at 7:11
• 1 @Rajesh in OP there is document.getElementById("html") meaning the element has ID html and not the root html. unless html is added we can only guess for now – guradio Commented Jun 9, 2017 at 7:14
• 1 @guradio Even I though that, but as OP has stated, I need to get the whole html page with the values., that implies he is using incorrect method – Rajesh Commented Jun 9, 2017 at 7:17
• 1 Mention what are you going to do with that HTML as part of question. That may help others ing up with solutions – Akhil Commented Jun 9, 2017 at 7:26

6 Answers 6

An input has a value attribute that determines the initial value of the input. It also has a value property that holds the current value of the input.

It appears that you want to export the HTML markup of the page, where the value attributes of all inputs are set to the value of the value property.

You can do so as follows:

// first, set `value` attribute to value of property for all inputs
$('input').attr('value', function() {
  return $(this).val();
});
// export HTML with correct `value` attributes
$('html').html();

And here is a little demo of that in action.

$('#export').on('click', () => {
  $('input').attr('value', function() {
    return $(this).val();
  });
  console.log($('html').html());
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Some paragraph.</p>
<input type="text" value="initial value" />
<h1>Header</h1>
<p>Another paragraph</p>
<button id="export">Export page</button>

for input value inside html use this code may got some help

$("#html input[type=text]").each(function(index,value) {     
    val = $("#"+value.id).val();
    alert(val)   
});

Assuming "html" itself is an id of an element, you can try cloneNode.

var clonedElem = document.getElementById("html").cloneNode(true);

This clonedElem is a DOM object which contains both html as well as values ( and all other attributes). You can now use this DOM for all your purposes.

For Eg. If you wish to insert it into another element, you can do like

document.getElementById('newElement').appendChild(clonedElem)

This will put the entire node with its values

As mented before,

.html() or innerHTML will return the markup. value is a property associated with input elements. Yes you have a tag, but eventually you end you initiating this property. So when you change value dynamically, it updates property and not attribute

You will have to loop over all the inputs and set value attribute.

function updateAttribute() {
  var parent = document.querySelector(".content");
  var inputs = parent.querySelectorAll("input");

  for (var i = 0; i < inputs.length; i++) {
    inputs[i].setAttribute("value", inputs[i].value);
  }
}

Working Demo

If you want to get input values I will do with .attr to change dynamically element value !

$("ButtonToCatchInputValue").click(function(){
        $("input").each(function(){
            $(this).attr("value",this.value);
        });
        console.log($("html").html());  
    });

Use document.cloneNode to clone the whole document with retaining the state of the html.

cloneNode has a boolean parameter that denotes the following

true - Clone the node, its attributes, and its descendants

false - Default. Clone only the node and its attributes

For more details check this document

function cloneMe() {
  var newelement = document.cloneNode(true);
  console.log(newelement.getElementsByTagName("input")[0].value)
}

<input type="text" value="Change My Value" style="width:100%" />
<input type="submit" onclick="cloneMe()" value="Clone Now" />