Javascript print page

Hi I have a survey page(survey.aspx) with question and answers. some of the answers have Radio buttons and check boxes. This page has a print button. When the user clicks on the print button another page(survey_print.aspx) opens up with the print content. I have all the content Radio buttons and check boxes in the pr开发者_StackOverflow中文版int page. But how to show the checked Radio buttons and check boxes in the print page. This has to be done using Javascript or jquery. Any idea how this can be done. Thanks in advance

---

As an alternative, you could use a print stylesheet on your survey page, eliminating the need for a separate survey_print.aspx.

By using a print stylesheet, you also gain the benefit of things working correctly if your user clicks their browser's print button (or presses Ctrl+P). You can just change your page's print button to call window.print().

---

As long as both pages are pulled from the same web site, a script in one can affect the other. Here's an example:

function printForm() {
    var preview = window.open(urlPrint);
    var inputs = document.forms.myForm.elements;
    var previewInputs = preview.document.forms.myForm.elements;

    for (var i = 0; i < inputs.length; i++) {
        var input = inputs[i];
        var previewInput = previewInputs[i];

        if (input.checked) previewInput.checked = true;
        if (input.selected) previewInput.selected = true;
    }

    preview.print();
}

I've put a working example up on jsFiddle (though it creates the preview window with document.write() rather than a separate URL).

document.forms: https://developer.mozilla.org/en/DOM/document.forms

form.elements: https://developer.mozilla.org/en/DOM/form.elements

---

You would have to send the selected values to your print page (as POST or GET parameters). If you are using jQuery you might want to look into the click function and the :input selector.

Another idea would be to omit the print page completely and provide some CSS for the print media type. This style is then only used for the print view (you could hide the websites navigation, header, footer etc.).

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