really really - 1 year ago 59
HTML Question

How to get html source of current website with filled input values

I want clone current state of website with all filled inputs values.

I was tried this

new XMLSerializer().serializeToString(document);
but this is not set input values.

Answer Source

There is a clone() function in jQuery that will do the trick:


With this cloned object you update all value-attributes of the input fields in the DOM:

$("#cloneTo input:text").each(function () {
     $(this).attr("value", $(this).val());

Do the same with all other DOM elements, where you need the values.

After that you can print the resulting HTML with:


See working example in jsfiddle:

Hope that helps :)

Based on the question in the comments from user "really", I create a special step by step "How to":

  1. Open your page in chrome:

  2. Hit F12, so the Chrome Console is visible (Documentation from google) Maybe you have to click the ">_" button in the upper right to let the console come up.

  3. Edit one input field on your homepage, so you can see later it is copied.

  4. Paste following code behind the prompt ">"

Paste first part and hit ENTER:

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '';

Paste second part and hit ENTER:

var div = document.createElement('div'); = 'cloneTo';
$("#cloneTo input:text").each(function () {
     $(this).attr("value", $(this).val());
  1. Your page is cloned at the bottom. You can alert the output by:

Paste and hit ENTER:


Hope that helps :)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download