I need a form that will apply a class to a div if a checkbox in form is checked then have submit button print the page

Question

The set up is when the user arrives on the page, it will have their information on the page they put in a previous form to review. Also on the page will be a form with 3 options listed with a checkbox by each option, and a button at the bottom of the form that says "Print."

The information at the top of the page that the user is reviewing is also applied to 3 letters that are wrapped in divs with display hidden. Each checkbox represents one of the hidden letters, let's say letter1, letter2 and letter3.

So, I need a form that will have a checkbox for each of the 3 letters, a submit button that prints the entire page upon clicking, and for the form to apply a class to each of the selected letter's div when the print button is clicked, so the print.css will only print the divs that have this class applied to it. I'd preferably like all this done using javascript or jquery, but really any simple method is welcome.

Thank you to all that help!

<form action="" id="letterPrint">

<input type="checkbox" name="letter1" value="letter1" /> Letter 1

<input type="checkbox" name="letter2" value="letter2" /> Letter 2

<input type="checkbox" name="letter3" value="letter3" /> Letter 3

<input type="submit" value="print" />

</form>

This is my form thus far.

Answer 1

First, adding a print style sheet does not need a class to specific divs. The following code makes it so that when your page prints it will take your print css and apply it to the page before it gets sent off to print.

<link rel="stylesheet" type="text/css" href="path/to/screen.css" media="screen" />

<link rel="stylesheet" type="text/css" href="path/to/print.css" media="print"/>

Making it print automatically is more tricky than it would seem. But, you can use this code to bring up the print box

if (window.print) {
    window.print();
}

Sending a page directly to the printer to be printed is not possible because the print information required to send data to the printer is located on the operating system. JavaScript only interacts with the browser.

Answer 2

您在找这种东西吗？