Skip to main content
L
LyaSmidtsx
Known Participant
October 22, 2023
Answered

print from selected checkbox

  • October 22, 2023
  • 1 reply
  • 1097 views

I have a page with all kinds of toys. A child can select his choice and then click on "print"

 

I would prefer to do it this way:
Click on the "print" button and only the selection will be printed.

 

Other way:
click on print: go to the next page where the selected photos are displayed and from there "print page"

who can help me?

 

see https://www.kiwanis-zonhoven.be/sinterklaas/toys.php 

    This topic has been closed for replies.
    Correct answer osgood_

    fantastic! only one more problem, if you scroll down, you have to go all the way up to press the print button. Is there a way to keep seeing the print button? see https://www.kiwanis-zonhoven.be/sinterklaas/speelgoed.html 


    quote

    fantastic! only one more problem, if you scroll down, you have to go all the way up to press the print button. Is there a way to keep seeing the print button? see https://www.kiwanis-zonhoven.be/sinterklaas/speelgoed.html 


    By @LyaSmidtsx

     

    Sure. Amend the 'printPage' and 'selectionPage' css to below

     

    .printPage, .selectionPage {
    display: block;
    width: 200px;
    margin: 0 calc(50% - 100px);
    position: fixed;
    top: 25px;
    padding: 15px;
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: 8px;
    }

     

    Plus add a bit of padding to the body css:

     

    body {
    position: relative;
    padding-top: 100px;
    }

    1 reply

    L
    LyaSmidtsxAuthor
    Known Participant
    October 22, 2023

    I found a code that wil do that on plain text, but it isn't working on my dynamic page

     

     

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>test</title>
        <script type="text/javascript">
            function setPrint(cb) {
                var cell = cb.parentNode;
                cell.className = cb.checked ? "print" : "noprint";
            }
            
        </script>

        <style type="text/css">
            @media print {
                .print {
                    display:inherit;
                }
                .noprint {
                    display:none;
                }
            }
        </style>

        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="Pragma" content="no-cache">
    </head>

    <body>
        <form>
            <table>
                <tr>
                    <td class="noprint">
                        data 1
                        <input type="checkbox" onclick="setPrint(this);" />
                    </td>
                </tr>
                <tr>
                    <td class="noprint">
                        data 2
                        <input type="checkbox" onclick="setPrint(this);" />
                    </td>
                </tr>
                <tr>
                    <td class="noprint">
                        data 3
                        <input type="checkbox" onclick="setPrint(this);" />
                    </td>
                </tr>
                <tr>
                    <td class="noprint">
                        data 4
                        <input type="checkbox" onclick="setPrint(this);" />
                    </td>
                </tr>
            </table>
            <input type="button" name="Print" value="Print It" onClick="window.print();">
        </form>
    </body>
</html>

     

    L
    LyaSmidtsxAuthor
    Known Participant
    October 22, 2023

    I tried another script but the result remains the same

    L
    LyaSmidtsxAuthor
    Known Participant
    October 22, 2023
    quote

    fantastic! only one more problem, if you scroll down, you have to go all the way up to press the print button. Is there a way to keep seeing the print button? see https://www.kiwanis-zonhoven.be/sinterklaas/speelgoed.html 


    By @LyaSmidtsx

     

    Sure. Amend the 'printPage' and 'selectionPage' css to below

     

    .printPage, .selectionPage {
    display: block;
    width: 200px;
    margin: 0 calc(50% - 100px);
    position: fixed;
    top: 25px;
    padding: 15px;
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: 8px;
    }

     

    Plus add a bit of padding to the body css:

     

    body {
    position: relative;
    padding-top: 100px;
    }

    Oh thank you! I am now trying to figure out how to make the checkboxes a bit larger, so that they are more clear to the children

    and then I'm done! thank you very much!

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices