Clone a <form></form> tag and wrap it

Question

So There is an existing form tag as such:

<form id="vCSS_mainform" onsubmit="javascript:return QtyEnabledAddToCart_SuppressFormIE();" action="/ProductDetails.asp?ProductCode=40124" name="MainForm" method="post">Bunch of Content</form>

There is a bunch of content inside of this form tag. I need to take just the element of it, clone it, and wrap it around another TABLE element that I have on the page.

I don't want anything in the form tag to be cloned. Is this possible?

I can't just do $("p").wrapAll(""); because that form action contains dymanic content that changes. So i need to find the form tag on whatever page the user is on and clone that exact one.

Answer 1

This is relatively easy to achieve, really all you have to do, is use .clone(), .append() and .empty():

$('#vCSS_mainform').clone().appendTo($('body')).empty();

JS Fiddle demo.

Bear in mind, of course, that duplicate ids are invalid HTML.

---

Edited to complete the answer, to wrap the #accBox you could use:

$('#accBox').wrap($('#vCSS_mainform').clone().appendTo($('body')).empty());

JS Fiddle demo.

References:

• clone().
• appendTo().
• empty().
• wrap().

Answer 2

Try someting like this.

function strip(htmlfullstring)
{
   var tmp = document.createElement("formid");
   tmp.innerHTML = html;
   return <form> + tmp.textContent||tmp.innerText+</form>;
}

if i understood your requirement.

Answer 3

var $clone = $('#vCSS_mainform').clone().empty().attr('id', 'newId');
$('#vCSS_mainform').remove(); // only if you don't need it anymore.
$('#yourTable').wrap($clone);

note: if you remove the original form, you don't need to set a new id for the clone (no need of .attr('id', 'newId'))

Answer 4

$("#accBox").wrap($('#vCSS_mainform').clone().empty());

Fiddle demo