How to print a specific Div content in JQuery with radio and text values

Question

I have a Html page with radio button placed on a div tag. I need to print the DIV content. I will select a radio option and I need to print with the radio checked state.

Here is the code I have tried

Script code:

function PrintDoc(printarea){
    var mywindow = window.open('', 'PRINT', 'height=400,width=600');

    mywindow.document.write('<html><head><title>' + document.title + '</title>');
    mywindow.document.write('</head><body >');
    mywindow.document.write('<h1>' + document.title + '</h1>');
        mywindow.document.write(document.getElementById('printarea').innerHTML);
    mywindow.document.write('</body></html>');    
    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10*/
    mywindow.print();
    mywindow.close();
    return true;
}

HTML Code

<DIV id="printarea">
    <input type="radio" name="myRadio" value="1" /> 1 <br />
    <input type="radio" name="myRadio" value="2" /> 2 <br />
    <input type="radio" name="myRadio" value="3" /> 3 <br />
</DIV>

I have tried the Windows.Print() option but it prints the entire page. I need exact div only like the image given below

Possible duplicate of [Print
only?](http://stackoverflow.com/questions/468881/print-div-id-printarea-div-only) - Use a print stylesheet and hide everything else — Pete, Apr 27 '17 at 09:46
I have tried the code but it is not printing the radio selected. It is just printing the normal DIV only. — Panchi, Apr 27 '17 at 09:55

score 0 · Answer 1 · edited Apr 27 '17 at 10:59

0

Fiddle link use jqprint plugin for print particular div

another example HTML

<html>
<head>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.jqprint-0.3.js" type="text/javascript"></script>
<link rel="stylesheet" href="test.css">

<script language="javascript" type="text/javascript">
$(function() {
  $("#PrintButton").click( function() {
      $('#divToPrint').jqprint();
      return false;
  });
});
</script>
</head>
<body>
<input id="PrintButton" type="button" name="Print" value="Print" />

<div id="divToPrint" class="test">
Print Me, I'm in DIV
</div>
<body>
</html

css

@media screen,print
{
  .test {
            background:#0F0;
            width:500px;
            height:200px;
        }
}

Demo

edited Apr 27 '17 at 10:59

Amal

3,398
1
12
20

answered Apr 27 '17 at 10:06

Alfin Paul

1,543
14
26

Here they just printing the text. It is printing, But this is not I need. I have controls inside the div say text box, Radio box next I have given some input to the text box and radio box, it is just printing the control alone not the content in the control. – Panchi Apr 27 '17 at 10:33
thank you, But I need different when I check different radio it is printing the first checked value.How to dynamically apply the checked state to HTML code? – Panchi Apr 27 '17 at 11:16
Ok, thank you. But when I change the check state randomly it is not printing correctly.Can you please check it once again? – Panchi Apr 27 '17 at 11:22
1

please check with this fiddle.. http://jsfiddle.net/alfinpaul/hPnXs/8/ – Alfin Paul Apr 27 '17 at 11:28
Thank a lot, Alfin Paul. Thanks for your precious time. Appreciated. – Panchi Apr 27 '17 at 11:32
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/142824/discussion-between-panchi-and-alfin-paul). – Panchi Apr 27 '17 at 12:01

How to print a specific Div content in JQuery with radio and text values

1 Answers1