print from selected checkbox

Forum|Forum|2 years ago
October 22, 2023
1 reply
1120 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

How to

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

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;
}

L

LyaSmidtsxAuthor

Known Participant

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

I tried another script but the result remains the same

O

osgood_

Legend

I think you will still have to collect the images chosen into and array when the checkbox is selected.

Then once you have those images in the array you can loop through it and output the selected images to the page, then print the page:

See example code below. I've collected a few sample images from your website and put them in a folder named 'toy_images'. The images are then stored by their jpg number in the 'selectedToys' array but you would need to get the number into the array when the checkbox for each toy is is selected by passing the value of the checkbox to the array - the example has just been manually coded to show you a possible workflow.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Print Images</title>
<style>
* {
box-sizing: border-box;
}
body {
position: relative;
}
.printImages {
position: absolute;
top: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 40px 40px 40px;
width: 100%;
height: 100%;
z-index: -100;
background-color: #fff;
}
.close{
width: 100%;
text-align: center;
text-decoration: none;
margin: 0 0 25px 0;
}
.close span {
background-color: red;
display: inline-block;
padding: 15px;
border-radius: 8px;
color: #fff;
}
img {
width: 100%;
max-width: 100%;

}
.product {
width: 22%;
margin: 0 0 30px 0;
display: grid;
place-items: center;
border: 1px solid #ccc;
}
.printPage {
display: block;
margin: 60px auto;
}
</style>
</head>
<body>

<button class="printPage">Print</button>
<div class="printImages"></div>





<script>
const printImages = document.querySelector('.printImages');
const printPage = document.querySelector('.printPage');
const selectedToys = [
'006.jpg',
'012.jpg',
'019.jpg',
'026.jpg',
'006.jpg',
'012.jpg',
'019.jpg',
'026.jpg',
'006.jpg',
'012.jpg',
'019.jpg',
'026.jpg',
'006.jpg',
'012.jpg',
'019.jpg',
'026.jpg',
'006.jpg',
'012.jpg',
'019.jpg',
'026.jpg',
'006.jpg',
'012.jpg',
'019.jpg',
'026.jpg',
'006.jpg',
'012.jpg',
'019.jpg',
'026.jpg',
'006.jpg',
'012.jpg',
'019.jpg',
'026.jpg',
]

printPage.addEventListener('click' , selectedImages);
function selectedImages() {
printImages.innerHTML = '';
printImages.style.zIndex = "100";
printImages.innerHTML += `<a class="close" href="print_image.html"><span>Close</span></a>`
selectedToys.forEach((imgUrl) => {
printImages.innerHTML += `
<div class="product">
<img src="toy_images/${imgUrl}" alt=""/>
</div>
`
});

setTimeout(function() {
window.print();
}, 100)
}

</script>
</body>
</html>

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded