• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
1

print from selected checkbox

Explorer ,
Oct 22, 2023 Oct 22, 2023

Copy link to clipboard

Copied

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 

TOPICS
How to

Views

560

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 2 Correct answers

LEGEND , Oct 22, 2023 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

...

Votes

Translate

Translate
LEGEND , Oct 22, 2023 Oct 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

...

Votes

Translate

Translate
Explorer ,
Oct 22, 2023 Oct 22, 2023

Copy link to clipboard

Copied

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>

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Oct 22, 2023 Oct 22, 2023

Copy link to clipboard

Copied

I tried another script but the result remains the same

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 22, 2023 Oct 22, 2023

Copy link to clipboard

Copied

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>

 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Oct 22, 2023 Oct 22, 2023

Copy link to clipboard

Copied

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

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 22, 2023 Oct 22, 2023

Copy link to clipboard

Copied

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.

 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 22, 2023 Oct 22, 2023

Copy link to clipboard

Copied

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>

 

 

 

 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Oct 22, 2023 Oct 22, 2023

Copy link to clipboard

Copied

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 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 22, 2023 Oct 22, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Oct 22, 2023 Oct 22, 2023

Copy link to clipboard

Copied

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 22, 2023 Oct 22, 2023

Copy link to clipboard

Copied

quote

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Oct 22, 2023 Oct 22, 2023

Copy link to clipboard

Copied

thank you, I already found an other solution! 🙂 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 22, 2023 Oct 22, 2023

Copy link to clipboard

Copied

quote

thank you, I already found an other solution! 🙂 


By @LyaSmidtsx

 

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 22, 2023 Oct 22, 2023

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Oct 23, 2023 Oct 23, 2023

Copy link to clipboard

Copied

LATEST

thank you

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines