Jquery – Clone iframe and Contents Form Values

cloneformsiframejquery

So I have a Div containing an iframe that I can Clone using JQuery.

The iframe src is a HTML page containing a form.

When I clone the Div and the iframe inside it, the iframe src is refreshed and loses any changed values.

Can I clone the iframe and the current state of the form?

Essentially what I want to end up with is two divs containing the same iframe and same content, with the form inside the cloned iframe to retain whatever values were set before cloning.

Is this possible?

I am using Jquery .clone(true)

The iframe src is on the same domain

EDIT:
This is how my code looks:

    $('.mybutton').click(function() {  

    $('#myapdiv').clone(true).appendTo('body');

When I click button with the class "mybutton" it clones the apDiv "myapdiv" and appends to body.
"myapdiv" contains an iframe "iframe1".

Best Answer

You can indeed get the contents of an iframe if it's on the same domain:

$(iframe).contents().find('body').html();

.html() can be used similar to .clone()

With clone you can do this:

$('#iframe').clone().appendTo('#somedestinationelement');

Whith html you can do this:

$(iframe).contents().find('body').clone().html().appendTo('#somedestinationelmment');