CODEWITHSUNDEEP
javascripthtmlprinting
Reave
Reave

Reputation: 11

Printable div with javascript & form fields

I am using a script that will print the specified div that I call. The problem is that when I want to print out a form with HTML fields, it would not print out information in those fields. Instead, it leaves it blank. Is their a was to make inputted information to be printed as well?

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;
}

HTML

<div id="printableArea">
</div>

<input title="Print" class="buttonBlack fl" onclick="printDiv('printableArea')" type="submit" value="Print" />

Upvotes: 1

Views: 2029

Answers (3)

user2164063
user2164063

Reputation:

try this 

function printDiv(divName) {
var inpText = document.getElementsByTagName("input")[0].value;
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
document.getElementsByTagName("input")[0].value = inpText;
window.print();
document.body.innerHTML = originalContents;
document.getElementsByTagName("input")[0].value = inpText;
}

Upvotes: 0

OlliM
OlliM

Reputation: 7113

You could of course have a print-only stylesheet that hides everything besides the area that you want to print. Then you wouldn't need any javascript (except maybe window.print() for the button). This would have the added benefit of working also when the user prints without using this button.

Upvotes: 0

Reza Owliaei
Reza Owliaei

Reputation: 3363

This will help you to print an element and form fields.

Check samples. Hope it helps!

Upvotes: 1

Related Questions