How do you print part of a page in Javascript?

[amjones]

We are offering a coupon for a free soft drink to everyone who fills out our survey. When the user hits the Submit button at the end of the survey, a page appears with the coupon and a Print button. Currently, the whole page prints, including headings and links. I would like to print only the coupon. This is made trickier by the fact that the coupon is customized for each person with the person's name and the date. All help will be greatly appreciated.

[~s.o.s~]

Don't provide the print option on the coupon page. Instead create a 'print view' button at the bottom which will take the user to a page without any frills with just the coupon. I don't know what kind of technique or server side language you are using to persist the user information, but with a bit of hacking, you should be able to easily manage it.

[MidiMagic]

You can't control functions which belong to the owner of the computer that is viewing your page.

[~s.o.s~]

> You can't control functions which belong to the owner of the
> computer that is viewing your page.
I don't think this is a question of 'controlling the functions of the owner', its rather a question which deals with the selective content which has to be served to the customer, so that the print function prints only the relevant part of the page.

[MidiMagic]

What I was thinking is that he wanted to do the equivalent of "print selection" with his code making the selection and choosing the "print selection" option in the Print menu.

That belongs to the user.

[MidiMagic]

I just checked out three coupon pages provided by well-known companies. All of them print the print button on the paper next to the coupon.

[plasmafire]

No problem at all, just have the browser open a new page (upon clicking print)

window.open("your page here")
pass the parameters that you need..
i,e. the coupon is customized for each person with the person's name and the date

window.open("yourPage.htm?customername=xxx&date=yyy")

After the page renders with the coupon,
call
document.print() in yourPage.htm
and maybe close the window after the page prints. and voila, one happy customer :)

[stymiee]

Better solution: use CSS. With CSS you can create a stylesheet dedicated to printing which is separate from the regular page display. This way you can use CSS to remove the parts of the page you don't want printed and even reformat the parts you do want printed. All major browser support this and it is not turned off as JavaScript often is.

[raphie]

As stymiee said... CSS is the best option... example

@media print{
    #div_not_to_print{
        display:none;
    }

    #div_to_print{
        display:inline-block;
    }
}

If every element in your HTML has id or class declare not to print the desired id or class, so when they print the page only print the desire area only, even if JavaScript is turned off. It works with all the browser I used like IE, Safari, Firefox, Chrome, Opera and any Geiko Browser like Firefox.

[fxm]

Unfortunately your comment comes almost three years too late for the participants in this thread.