print from selected checkbox

Report · Oct 22, 2023

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

Report · Oct 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>

Report · Oct 22, 2023

I tried another script but the result remains the same

Report · Oct 22, 2023

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>

Report · Oct 22, 2023

the images come from a database, so it is dynamic content.
This is possible with this script. I've tried something, but it's not the result I want

this is the code I use now

<!doctype html>
<html>

<head>
<base href="/">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>speelgoed</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />

    <script type="text/javascript" src="dmxAppConnect/dmxAppConnect.js"></script>
	 <style>
 @media print {
 input[type=checkbox], .faq { display: none; }
 input[type=checkbox]:checked ~ div { display: block; }
 }
 </style>
</head>

<body is="dmx-app">

  
  <dmx-serverconnect id="serverconnect" url="dmxConnect/api/Producten/products.php" site="undefined"></dmx-serverconnect>
  <div class="container"><button onclick="window.print()">Print</button>
    
	  
	  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 gy-4" is="dmx-repeat" id="repeatSpeelgoed" dmx-bind:repeat="serverconnect.data.qrySpeelgoed">
		
		
      <div class="col">
        <div class="card"> <img src="" alt="" width="100" height="150" dmx-bind:src="sinterklaas/speelgoedboek/{{fotonaam}}" dmx-bind:alt="{{fotonaam}}">
          <div class="card-body"><input type="checkbox" onclick="setPrint(this)>
            <div> 
 
 <div class="faq">
</div>
 </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

</body>

</html>

I know that <div class="faq">
</div> is not in the right place, but I tried inserting it in several places, but then I got a blank page to print

Report · Oct 22, 2023

OK I've thought about this and unless one of my learned colleagues has a brighter solution I think you ARE going to have to push the selected images to an array to 'isolate' them from the rest of the images on the page AND as has been previously suggested by Ben, store that array to local browser storage.

I say this because IF the array of images is output on the same page as the images with the checkboxes in an overlay window the printer will attempt to print not only the images on the overlay but all the images with the checkboxes too, at least on my printer it indicates in the preview that is want it wants to do.

Once you have the selected images in an array stored to local storage you can create a dedicated 'print' page which will only output the images that need to be printed.

Also you really need to consider the situation whereby a user unckecks the checkboxes - you need then to remove that image from the array.

It gets complicated and even more complicated as you dive deeper and is not really something that can be done successfully if you dont know enough code OR how a bit of software like Wapppler really works.

Report · Oct 22, 2023

OK I have an easier solution for you - your attempt to hide and show the relative images set me thinking. When the 'print' button is clicked the script will go through each checkbox and see if its checked - if it is the 'product' div which houses each image remains visible, otherwise its not displayed, leaving you with only those that have been selected to print.

If you can get your array back from your server in json format and into an array and loop through that adapting the code below I think youre good to go.

At the moment this code example is still manually producing the array of images but its easy enough to adapt. I cant get the images from your API end point as there is a cross-browser-origin (CORS) error other wise I would just use the fetch API to bring them into the code directly.

Test it out by creating a 'toy_images' folder and putting a few of your images in there then update the 'selectedToys' array so the images are the same as in your test 'toy_images' folder

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Print Images</title>
<style>
* {
box-sizing: border-box;
}
body {
position: relative;
}
.printPage, .selectionPage {
display: block;
margin: 50px auto;
}
.toySelection {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 40px 40px 40px;
background-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;
}
.selectionPage {
display: none;
}

</style>
</head>
<body>

<button class="printPage" onclick="printImagesFunc()">Print</button>
<button class="selectionPage" onclick="selectionPageFunc()">Back</button>

<div class="toySelection"></div>

<script>

const toySelection = document.querySelector('.toySelection');
const printPage = document.querySelector('.printPage');
const selectionPage = document.querySelector('.selectionPage');

let 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',
]

// Loop through toys of page load
selectedToys.forEach((img , index) => {
toySelection.innerHTML += `
<div class="product">
<img src="toy_images/${img}" alt=""/>
<input class="checkedToy" type="checkbox" value="${index}" >
</div>
`
});

// Get all the product boxes
const product = document.querySelectorAll('.product');



// Print Images
function printImagesFunc() {
selectionPage.style.display = "block"
printPage.style.display = "none"
const checkedToy = document.querySelectorAll('.checkedToy')
checkedToy.forEach((checkedToy , index) => {
if(checkedToy.checked) {
product[index].style.display = "block";
}
else {
product[index].style.display = "none";
}
})
setTimeout(function() {
window.print();
}, 100)
}

// Go back to toy selection page
function selectionPageFunc() {
window.location.href = "toy_selection.html";
}


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

Report · Oct 22, 2023

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

Report · Oct 22, 2023

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

Report · Oct 22, 2023

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!

Report · Oct 22, 2023

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!

By @LyaSmidtsx

Add the below css to the current list:

.checkedToy {
width: 30px;
height: 30px;
}

Report · Oct 22, 2023

thank you, I already found an other solution! 🙂

Report · Oct 22, 2023

thank you, I already found an other solution! 🙂

By @LyaSmidtsx

'input' which you chose would do it as well.

Report · Oct 22, 2023

You will need to retain - width: 100%; and max-width: 100%; on the img css as I can see on the print preview they are spilling outside their 'product' boxes and starting to overlap each other.

Report · Oct 23, 2023

thank you

print from selected checkbox

2 Correct answers