将DOM从当前状态的DOM追加/复制到div

Question

I have a form on a page. The form contains text inputs, checkboxes, selects (interactive elements). I want the user to be able to click a button, and reproduce a portion of the form elsewhere on the page, in the current state, preserving the text entered, the checkboxes checked, and the selects selected.

Currently I have this, which appends the HTML, however it grabs the HTML in the state it was when the page was loaded.

$('#create_unique_field').click( function() {
    $('#unique_field_cnt').append($('#template_cnt').html());
});

I have tried using delegation using on(), like so, with the same results.

$( 'body' ).on( 'click', '#create_unique_field', function() {
    $('#unique_field_cnt').append($('#template_cnt').html());
});

What I want is the current state of the HTML, not the HTML at the point when the page was loaded. How can I accomplish this?

Answer 1

It doesn't work that way, you need to bind values of form elements and create new form elements with that data. More or less it falls on var inputText = $('#someInputEl').val(); and then applying that values on new form elements and THEN inserting it.

Try this:

<input type="text" id='one'>
<button>submit</button>   
<div id="target"></div>   

$(function(){
    $('button').click(function(){
        var inputVal = $('#one').val();
        var newInputEl = $("<input type='text' id='two'>");
        newInputEl.val(inputVal);
        $('#target').html( newInputEl );
    });    
});

This is rough sketch but you should make it work this way, here is fiddle .