Htykuut

I have this simple script that prints a part of a webpage.
However, it does not print user input.

My goal is to only print the form and the user input; not the rest of the webpage.

I do not want to use css; just js/jQuery and html.

My question is: how can I print various form input elements including the user input?

HTML:

<div id="print-content">

        <textarea>Print User Input</textarea>

        <input type="button" onclick="printDiv('print-content')" value="print a div!"/>

</div>

js:

<script type="text/javascript">

    function printDiv(divName) {

        var printContents = document.getElementById(divName).innerHTML;

        var originalContents = document.body.innerHTML;

        document.body.innerHTML = printContents;

        window.print();

        document.body.innerHTML = originalContents;

    }

</script>

The current value of an input is not represented in the HTML (only the default value), so it won't show up in innerHTML.

You would need to loop over all the inputs in the original page, read their value properties, then copy the values to the new inputs on the new page.

You'd probably be better off using CSS and @media print to hide the elements you don't want to be printed rather than rewriting the document with innerHTML multiple times.

Try by removing this line document.body.innerHTML = printContents;

function printDiv(divName) {

  var printContents = document.getElementById(divName).innerHTML;

  var originalContents = document.body.innerHTML;

  window.print();

}

<div id="print-content">

  <form>

    <textarea>Print User Input</textarea>

    <input type="button" onclick="printDiv('print-content')" value="print a div!" />

  </form>

</div>

Tested on chrome only.

 function printDiv(divName) {



    var printContents = document.getElementById(divName).cloneNode(true);



    w = window.open();

    w.document.body.appendChild(printContents);

    w.print();

    w.close();

    return true;

}