Search code examples
javascriptphphtmlblob

How to copy HTML content into a new tab

I am building a web app and I need to copy an HTML div and everything inside it into a new tab. I am writing this code in JavaScript. So far I have been working on creating a blob and then creating a file to download. This approach copies all the HTML code I need BUT it does not copy the text that has been inputted into any text fields. As I understand, the problem is that the entered text is not part of the HTML code so it cannot be copied. However I cannot find another approach to this, please assist. Thank you

Solution

  • (Inspired by comment by @vanowm)

    First, copy the html (say inside a DIV)

    Then you'll need loop through all input fields and read their value so you can apply them.

    So the code is like this (amend to suit your further needs):

    <div id=container><html>
<input type=text name=text1 id="text1">
<br><input type=text name=text2 id="text2">
</html></div>

<textarea id=target style="width:100%;height:200px;"></textarea>

<input type=button name=go onclick="trigger();" value="Parse">

<script>
function trigger(){
target0=document.getElementById('container').innerHTML;

text1= document.getElementById("text1").value;
text2= document.getElementById("text2").value;

target0=target0.replace('id="text1"', 'id="text1" value="' + text1 + '"');
target0=target0.replace('id="text2"', 'id="text2" value="' + text2 + '"');

document.getElementById("target").innerHTML=target0;

}
</script>