如何使用jquery复制修改后的输入值

Question

I have a pretty complex form that I'm copying over to a print view by grabbing the entire .html() of the form. Overall it works great, but I'm running into a problem where it's getting the initially rendered values of input fields instead of the modified values.

I've illustrated my problem here: http://jsfiddle.net/GAfrU/

Css

#perform_copy {
width: 48px;
height: 24px;
background-color: #d7d7d7;
cursor: pointer;
padding: 0px 8px;
}

Html

<div id="original">
    <input type="text" value="100"></input>
</div>
<div id="copy">
    </div>
<div id="perform_copy">Copy</div>

JS

function copy() {
   $("#copy").html($("#original").html());
}

$(document).ready(function() {
    $("#perform_copy").click(copy);
});

If you click copy it works properly with the unmodified value, but if you type a new value in it does. I realize typing the value in doesn't modify the HTML, and likewise editing the value with jQuery's .val() doesn't seem to fix the issue either. Is a way I can copy the values from the input boxes into the actual DOM so they're be properly copied using jQuery's .html() function?

Answer 1

$('#original').clone().appendTo('#copy');

Is a better way to copy HTML.

http://api.jquery.com/clone/

Answer 2

use clone() .. to copy element

function copy() {
   $("#copy").html($("#original").clone());
}

$(document).ready(function() {
  $("#perform_copy").click(copy);
});

however.. since you are cloning the div with id as original.. you will end up having two elements with same ID which is invalid... so its better to change the id of cloned element so that IDs are unique

function copy() {
   $("#copy").html($("#original").clone().prop('id','copyoriginal'));
}

fiddle here