How to trigger onChange event when form is submitted?

Question

I'm trying to populate HTML table with filter(two dropdowns) from CSV file by using PHP, JS, and jQuery. When user open the page user will see below dropdown, the options for this drop downs are file names in the dir.

<form name="form1" method="post">
        <select class="form-control col-sm-5" onChange="document.forms['form1'].submit();" id="choosefile" name="choosefile">
            <option value="" selected>Choose Term</option>
            <?php
                foreach ($files as &$value) {
                    echo '<option value="' . $value . '">' . $value . '</option>';
                }
            ?>
        </select>
</form>

when user submit the form below PHP code gets executed

<?php
if(isset($_POST['choosefile']) && !empty($_POST['choosefile'])) {
    $t = $_POST["choosefile"];
    $filepath = "uploads/$t";
    $row = 0;
    $the_big_array = [];
    $unique_start_date = [];
    $unique_ids = array();
    if (($h = fopen("{$filepath}", "r")) !== false) {
        while (($data = fgetcsv($h, 1000, ",")) !== false) {
            $the_big_array[] = $data;
            $unique_ids[] = $data[0];
            $a unique_start_date[] = $data[1];
        }
        fclose($h);
    }


//closing bracket for parent if statement is at the end of the file
?>

Below two dropdowns act as a filter

    <select name="" id="session_id">
        <option value="">[Select Session]</option>
    </select>
    <select name="" id="start_date">
        <option value="">[Select Start Date]</option>
    </select>

    <table border="1" class="table" id="personDataTable">
        <thead>
            <tr>
                <th scope="col">Session</th>
                <th scope="col">Start Date</th>

            </tr>
        </thead>
        <tbody id='tbody'>
        </tbody>
    </table>

    <script>
    var obj1 = <?php array_shift($the_big_array); echo json_encode($the_big_array); ?>;
    var obj2 = <?php array_shift($unique_start_date); echo json_encode(array_unique($unique_start_date)); ?>;
    var obj3 = <?php array_shift($unique_ids); echo json_encode(array_unique($unique_ids)); ?>;

    var table = document.getElementById("personDataTable").getElementsByTagName("tbody")[0];
    var temp,temp1 = {};
    var row = 0;

    $("#choosefile, #session_id, #start_date").on('change', function() {
        var d1 = $( "#session_id" ).val();
        var d2 = $( "#start_date" ).val();

        $("#tbody").empty();

            for (var i = 0; i < obj1.length; i++) {
                if (d1 && obj1[i][0] !== d1 && row > -1) continue;
                if (d2 && obj1[i][1] !== d2 && row > -1) continue;
                row++;
                newTr.insertCell(-1).appendChild(document.createTextNode(obj1[i][0]));
                newTr.insertCell(-1).appendChild(document.createTextNode(obj1[i][1]));
                }
   });



</script>

<?php }?>

The problem I'm having is when user submit first dropdown(options with file name) table doesn't get generated or it does not call .on('change', function() under which table generator code is present.

I'm not able to trigger that .on('change', function() for first dropdown but when user click on filter dropdowns that part works well

Answer 1

This answer is an extent to my last comment, as example.

//Put it into a seperate named function:
function fillTable() {
    var d1 = $( "#session_id" ).val();
    var d2 = $( "#start_date" ).val();

    $("#tbody").empty();

    for (var i = 0; i < obj1.length; i++) {
         if (d1 && obj1[i][0] !== d1 && row > -1) continue;
         if (d2 && obj1[i][1] !== d2 && row > -1) continue;
         row++;
         newTr.insertCell(-1).appendChild(document.createTextNode(obj1[i][0]));
         newTr.insertCell(-1).appendChild(document.createTextNode(obj1[i][1]));
    }
}

                                             // reference to that function here
$("#choosefile, #session_id, #start_date").on('change', fillTable);

// call when the page is loading:
fillTable();