Question

I’ve been asked to provide some tricky printing functionality to a dynamicly generated page. The page is to display each record along with a checkbox. Then one print button at the bottom of the page. The idea is to let the user check the box next to each record they want to print, then when they click the print button at the bottom of the page, only those records that were selected will be printed.

I’m assuming some combination of CSS and Javascript will be required, but I really don’t know. Any ideas? Thanks in advance!

Answer 1

PHP solution

If you have something like

<form method="post" action="print.php">
  <p>Select the records to be printed</p>
  <p>
    <input type="checkbox" name="records[]" value="1"><div class="record">Record 1</div><br>
    <input type="checkbox" name="records[]" value="2"><div class="record">Record 2</div><br>
    <input type="checkbox" name="records[]" value="3"><div class="record">Record 3</div>
  </p>
</form>

You will automatically get an array $_POST['records'] with all the values of the selected records in it in your php script print.php. (Note that this only works if the name of all the checkboxes is the same and ends with [])

The php script could then do something like:

<?php
foreach ($record in $_POST['records']) {
    // fetch the record with id $record from the database (or similar)
    // print this record to the page
}
echo "<script>window.print();</script>"; // or put that into the onload attribute of the body tag
?>

JavaScript and CSS

An other valid possibility would be to do the whole thing via javascript. Therefore you would have to check every checkbox if it’s checked when one clicks the print button and then removes or hides all the records that were not checked.

A helpful thingy is also the css property media with which you can define extra styles that only apply to certain devices. This code sould be able to do everything without any javascript except an attribute onclick="window.print()" in your print button:

@media print {
    input{
        display: none;  /* hides all input elements for the printer */
    }
    .record {
        display: none;  /* hide all records by default */
    }
    input[checked] + .record, input:checked + div.record {
        /* display all that are immediately preceeded by a input with checked attribute */
        display: block;  
    }
}

Note that I tested it only in Safari (where the pseudoclass :checked leads to the wanted result and not the attribute selector) and only will work for newer versions of browsers with css3 and selector support.