4

I am trying to print a specific part of a webpage. But whenever I try to print it, it doesn't show the radio button I have selected, what's in a text box or what I have selected from the drop down menu. Can you please tell me how can I achieve this in the following code

<html>
    <head>       
    <script>
        printDivCSS = new String ('<link href="myprintstyle.css" rel="stylesheet" type="text/css">')
        function printDiv(divId) {
            window.frames["print_frame"].document.body.innerHTML=printDivCSS + document.getElementById(divId).innerHTML;
            window.frames["print_frame"].window.focus();
            window.frames["print_frame"].window.print();
        }
    </script>
    </head>

    <body>
        <p>Some information that doesn't need to be printed</p>

        <div id="div1">This is the Part that need to be printed<br>
        <input type="radio" name="gender" value="male"> Male<br>
        <input type="radio" name="gender" value="female"> Female<br>
        <input type="radio" name="gender" value="other"> Other
        <br>
        <select>
        <option value="empty"> </option>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="opel">Opel</option>
        <option value="audi">Audi</option>
        </select>
        <p>Print out need to show the gender and the car brand I have selected</p>
        </div>        
        <iframe name="print_frame" width="0" height="0" frameborder="0" src="about:blank"></iframe>
        <b>Click here to Print:</b> <a href="javascript:printDiv('div1')">Print</a><br>
    </body>
</html>

enter image description here

Please show me with an example code if possible

jophab
  • 5,356
  • 14
  • 41
  • 60
NewLearner
  • 41
  • 3
  • Did you define styles for print only? Using the @print media query –  Jan 29 '17 at 08:02
  • what happens if an option is preselected on pageload, does it print selected then? – Medda86 Jan 29 '17 at 08:03
  • Hi. the HTML doe's not contain the user select. you can use the same page to print. just close your print-css code with @media print {} – inon Jan 29 '17 at 08:06
  • Thank you for all the comments and answers. But I can not use `@media print { .unwanted-div, button{ display:none; } }` If I use this, it will still print out menu buttons at the very top, logo and all the unwanted things of my WordPress site. Can you show me an example of how to do this – NewLearner Jan 29 '17 at 08:57
  • 1
    Possible duplicate of [Print specific part of webpage](http://stackoverflow.com/questions/12997123/print-specific-part-of-webpage) –  Jan 29 '17 at 20:43

1 Answers1

0

You can use this one if there is unwanted div just put @media print and display:none;. As you can see when you print uwanted-divand button is not showing.

@media print
   {
      .unwanted-div, button{
      display:none;  
      }       
   }
<html>
    <body>
        <div class="unwanted-div">
          Some information that doesn't need to be printed</p>
      </div>

        <div id="div1">This is the Part that need to be printed<br>
        <input type="radio" name="gender" value="male"> Male<br>
        <input type="radio" name="gender" value="female"> Female<br>
        <input type="radio" name="gender" value="other"> Other
        <br>
        <select>
        <option value="empty"> </option>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="opel">Opel</option>
        <option value="audi">Audi</option>
        </select>
        <p>Print out need to show the gender and the car brand I have selected</p>
        </div>        
        <button onclick="myFunction()">Print this page</button>

<script>
function myFunction() {
    window.print();
}
</script>
    </body>
</html>
Mark Valenzuela
  • 338
  • 1
  • 9
  • Thank you for the answers. But I can not use @media print { .unwanted-div, button{ display:none; } } If I use this, it will still print out menu buttons at the very top, logo and all the unwanted things of my WordPress site (Which I have no control to hide). Can you please update your answer to solve this. – NewLearner Jan 29 '17 at 09:02