jquery - After using JavaScript print function, nothing else works

Question

Background

• I am making a transaction recording application in which you add transactions and PHP saves it to the MySQL database.
• PHP echos out the transactions into a table.
• The table has filters.
• One of the columns has a checkbox for a transaction deleting form and one radio button for modifying transactions.

Here are some screenshots:

Table Example

Filters

Actions

Now when I print the table, it is all fine! When I click the delete/modify buttons, they are also fine.

But when I print the table, and then delete or modify (or check all), nothing happens. I checked the console but nothing is there either. I don't know why...

Here is my Javascript:

filters.js

function actions()
{
    div = document.getElementById("actions");
    if (div.style.display == 'none')
    {
        div.style.display = 'block';
    }
    else
    {
        div.style.display = 'none';
    }
}

function filters()
{
    div = document.getElementById("filters");
    if (div.style.display == 'none')
    {
        div.style.display = 'block';
    }
    else
    {
        div.style.display = 'none';
    }
}

function filter()
{
    // Declare variables
    var des,
        date,
        table,
        tr,
        desc,
        dater,
        amount,
        merchant,
        type,
        source,
        i;
    des = document.getElementById("des").value.toUpperCase();
    date = document.getElementById("date").value;
    $ = document.getElementById("amount").value.toUpperCase();
    merch = document.getElementById("merchant").value.toUpperCase();
    typef = document.getElementById("type").value.toUpperCase();
    sourcef = document.getElementById("source").value.toUpperCase();

    table = document.getElementById("table");
    tr = table.getElementsByTagName("tr");

    // Loop through all table rows, and hide those who don't match the search query
    for ( i = 0; i < tr.length; i++)
    {
        desc = tr[i].getElementsByTagName("td")[1];
        dater = tr[i].getElementsByTagName("td")[2];
        amount = tr[i].getElementsByTagName("td")[3];
        merchant = tr[i].getElementsByTagName("td")[4];
        type = tr[i].getElementsByTagName("td")[5];
        source = tr[i].getElementsByTagName("td")[6];
        if (desc && dater && amount && merchant && type && source)
        {

            desval = desc.textContent || desc.innerText;
            daval = dater.textContent || dater.innerText;
            amoval = amount.textContent || amount.innerText;
            merval = merchant.textContent || merchant.innerText;
            tval = type.textContent || type.innerText;
            sval = source.textContent || source.innerText;
            filtered = desval.toUpperCase().indexOf(des) > -1 && daval.indexOf(date) > -1 && amoval.indexOf($) > -1 && merval.indexOf(merch) > -1 && tval.indexOf(typef) > -1 && sval.indexOf(sourcef) > -1;
            if (filtered)
            {
                tr[i].style.display = "";
            }
            else
            {
                tr[i].style.display = "none";
            }
        }
    }

}


$('#da').submit(function(event)
{

    event.preventDefault();
    //this will prevent the default submit

    if (confirm("Are You Sure You Really Want To Delete All The Transactions?"))
    {

        $(this).unbind('submit').submit();
    }// continue the submit unbind preventDefault

    else
    {
        console.log("User Didn't Delete All The Transactions");
    }
});

In Document:

$( document ).ready(function() {
        $('#check-all').click(function() {
            $("input:checkbox").attr('checked', true);
        });
        $('#uncheck-all').click(function() {
            $("input:checkbox").attr('checked', false);
        });
        var editid = $('#an').val();
        var ms = $('#ms');
        var ds = $('#ds');
        var delete123456 = $('#delete');
        var print  = $('#print');

        $(print).click(pdf)
        $(ds).click(delete123)
        function delete123() {
            if (anyCheckbox()) {
                $('#delete').submit()
            } else {
                alert('Please Choose Some Transactions To Be Deleted First!')
            }
        }

        $(ms).click(modify123)
        function modify123() {
            if (anyRadio()) {
                editid = $('input[name="id"]').val();
                loc = "http://localhost/Projects/tests/modify.php?id=" + editid;
                window.location.replace(loc);
            } else {
                alert('Please Choose A Transaction To Be Modifyed First!')
            }
        }
        var restorepage = document.body.innerHTML;

        function pdf() {
            //$('.toper').remove();
            document.querySelectorAll(".toper").forEach(el => el.remove())
            document.querySelectorAll("tr").forEach(el => el.deleteCell(0))
            window.print();
            document.body.innerHTML = restorepage;
        }

        function anyCheckbox() {
            var inputElements = document.getElementsByTagName("input");
            for (var i = 0; i < inputElements.length; i++)
                if (inputElements[i].type == "checkbox")
                    if (inputElements[i].checked)
                        return true;
            return false;
        }

        function anyRadio() {
            var inputElements = document.getElementsByTagName("input");
            for (var i = 0; i < inputElements.length; i++)
                if (inputElements[i].type == "radio")
                    if (inputElements[i].checked)
                        return true;
            return false;
        }
    });

My PHP file if it helps:

<!DOCTYPE html>
<html>

<head>
    <title>View Transactions</title>

    <link rel="stylesheet" href="styles.css" type="text/css">
    <script src="jquery.js"></script>

    <script src='filters.js'></script>


    <script>
    $( document ).ready(function() {
        $('#check-all').click(function() {
            $("input:checkbox").attr('checked', true);
        });
        $('#uncheck-all').click(function() {
            $("input:checkbox").attr('checked', false);
        });
        var editid = $('#an').val();
        var ms = $('#ms');
        var ds = $('#ds');
        var delete123456 = $('#delete');
        var print  = $('#print');

        $(print).click(pdf)
        $(ds).click(delete123)
        function delete123() {
            if (anyCheckbox()) {
                $('#delete').submit()
            } else {
                alert('Please Choose Some Transactions To Be Deleted First!')
            }
        }

        $(ms).click(modify123)
        function modify123() {
            if (anyRadio()) {
                editid = $('input[name="id"]').val();
                loc = "http://localhost/Projects/tests/modify.php?id=" + editid;
                window.location.replace(loc);
            } else {
                alert('Please Choose A Transaction To Be Modifyed First!')
            }
        }
        var restorepage = document.body.innerHTML;

        function pdf() {
            //$('.toper').remove();
            document.querySelectorAll(".toper").forEach(el => el.remove())
            document.querySelectorAll("tr").forEach(el => el.deleteCell(0))
            window.print();
            document.body.innerHTML = restorepage;
        }

        function anyCheckbox() {
            var inputElements = document.getElementsByTagName("input");
            for (var i = 0; i < inputElements.length; i++)
                if (inputElements[i].type == "checkbox")
                    if (inputElements[i].checked)
                        return true;
            return false;
        }

        function anyRadio() {
            var inputElements = document.getElementsByTagName("input");
            for (var i = 0; i < inputElements.length; i++)
                if (inputElements[i].type == "radio")
                    if (inputElements[i].checked)
                        return true;
            return false;
        }
    });
    </script>
</head>


<body>
    <?php
    $conn = mysqli_connect('localhost', 'admin', 'myphpadmin', 'tests');

    // Run the query.
    $result = mysqli_query($conn, "SELECT Id, Description, Date, Amount, Merchant, Type, Sub, Source  FROM main");
    $num = mysqli_num_rows($result);
    // Get the result in to a more usable format.
    $query = array();
    function display($result, $conn)
    {
        while ($query[] = mysqli_fetch_assoc($result));
        array_pop($query);
        //echo '<div id = "container" style = "width: 550px; height: 400px; margin: 0
        // auto"></div>';
        echo "<div id='top'>";
        echo "<button onclick='actions()'>Actions</button>&nbsp<button onclick='filters()'>Filters</button><br>";
        echo "<div style='display: none' id='actions'>";
        echo '<fieldset><legend>Actions</legend>';
        #echo "<input type='text' id='an'>";
        echo "<input type='submit' value='Modify Transaction' id='ms'>";
        echo "<br><br>";
        echo "<input type='submit' value='Delete Transactions' id='ds'>";
        echo "&nbsp<button id='check-all'>Check All</button>&nbsp
        <button id='uncheck-all'>Uncheck All</button> ";
        echo "</fieldset><br></div>";
        echo "<div id='filters' style='display: none;'>";
        echo "<fieldset><legend>Filters</legend>";
        echo "<input type='text' id='des' placeholder='Description'>&nbsp<input type='text' id='date' placeholder='Date'>&nbsp";
        echo "<input type='number' id='amount' placeholder='Amount' step='0.01' min='0'>&nbsp<input type='text' id='merchant' placeholder='Merchant'>&nbsp";
        echo "<input type='text' id='type' placeholder='Type'>&nbsp<input type='text' id='source' placeholder='Source'>&nbsp<input type='submit' value='Apply Filters' onclick='filter()'>";
        //echo "&nbsp<input type='reset' value='Clear Filters' onclick='reset()'>";
        echo '</fieldset></div><br>';
        echo "</div>";
    

Answer 1

Don't remove and recreate elements when printing, just hide them with a media query:

@media print {
    .toper, tr {
        display: none;
    }
}