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.
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')
)
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 id
s 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()
.
$("#accBox").wrap($('#vCSS_mainform').clone().empty());
Fiddle demo
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.