How to print contents of a php page that's included in a page as a jquery popup message

Question

So I have a php page that echoes results based on the input from another page, I've successfully made it display on the page that is intended to display in but I need it to have a print button to print just the content that the php script displays and not the whole page. But I am not sure how to do that.

Here's how the page looks like:

So basically I want to only print the contents inside that popup message starting with Class 3T.. etc.

Here's the code for the PHP script:

<?php

// HTML table
// Organized by Class, add Teacher name
// SUBJECT | CONTENT OF ASSIGNMENT | DUE DATE

include_once "../config/config.php";

$teacherId = $_POST['teacher_id'];

$sql = "SELECT
        c.id as classID, c.name as className,
        u.l_name as lastName, u.f_name as firstName
        FROM classroom AS c
        LEFT JOIN teacher AS t ON c.hr_teacher_id = t.id
        LEFT JOIN user AS u on t.user_id = u.id
        WHERE c.hr_teacher_id = '$teacherId'";

$result = $conn->query($sql);
$class_results = $result->fetchAll();

//var_dump($class_results);

for($i = 0; $i < sizeof($class_results); ++$i ){
    echo ('<h2>'.$class_results[$i]['className'].' - '.$class_results[$i]['lastName'].', '.$class_results[$i]['firstName'].'</h2>');

    $sql2 = "SELECT
            s.name AS subjectName, 
            sa.content AS subjectAssignmentContent, 
            sa.due_date AS dueDate
            FROM classroom AS c
            LEFT JOIN subject_class AS sc on c.id = sc.classroom_id
            LEFT JOIN subject AS s ON s.id = sc.subject_id
            LEFT JOIN subject_assignment AS sa on sc.id = sa.subject_class_id
            LEFT JOIN assignment AS a on a.id = sa.assignment_id
            WHERE c.id = '".$class_results[$i]['classID']."'
            AND DATE(a.date) =  DATE(NOW())
            ORDER BY s.name";


    $result2 = $conn->query($sql2);

    $class_assignments = $result2->fetchAll();

    if(sizeof($class_assignments)==0) { echo ('<p>No assignments for this class today.</p>');}
    else {
        echo('<table style="border-style: solid; border-width: 1px;">'."\n");
        for($j = 0; $j < sizeof($class_assignments); ++$j ){
            echo('<tr style="border-style: solid; border-width: 1px;">'."\n");
            echo('<td style="border-style: solid; border-width: 1px;">'.$class_assignments[$j]['subjectName'].'</td>'."\n");
            echo('<td style="border-style: solid; border-width: 1px;">'.$class_assignments[$j]['subjectAssignmentContent'].'</td>'."\n");
            echo('<td style="border-style: solid; border-width: 1px;">'.$class_assignments[$j]['dueDate'].'</td>'."\n");
            echo('</tr>'."\n");
        }
        echo('</table>'."\n");
    }
}
?>

<!-- This doesn't work because it prints everything in the page -->
<!--<button onClick="window.print()">Print this page</button>-->

Any help is greatly appreciated!

Answer 1

The best way to format your output for print is the same place you format your page for the screen: the CSS.

There you can define rules only for print with:

@media print {
   /* Your Print Styles here */
}

In your example, you could hide (display: none) all the content you do not want printed.

Regardless of how the print is initiated (Strg+P, Browser button, your JS snippet), the print preview will then adhere to the print-specific CSS rules.

A more detailed tutorial i found online