Pass GET Variable to Modal to use in Query

I am trying to build a budget lookup tool. I have form where someone enters an account#, fund#, and deptID#. When they hit search, it opens a modal and will display a table of the budget balances that match the entered fund, account, and deptID.

I can get the modal to open but, I can’t seem to get the data to pass to the modal and display the data based on the SQL query. Here is my code:

Here is the form:

<form method="GET" id="frm" name="frm">
<div class="row">
    <div class="col mb-2">
    <label for="account">Account:</label>
   <select class="form-control" name="account2" id="account2" required>
      <option></option>
     <?php
while(!$accounts->atEnd()) { //dyn select
?>
                <option value="<?php echo($accounts->getColumnVal("account")); ?>"><?php echo($accounts->getColumnVal("account")); ?>: <?php echo($accounts->getColumnVal("description")); ?></option>
                <?php
  $accounts->moveNext();
} //dyn select
$accounts->moveFirst();
?>
      </select>
    </div>
    <div class="col mb-2">
    <label for="fund">Fund:</label>
     <select class="form-control" name="fund2" id="fund2" required>
      <option></option>
     <?php
while(!$funds->atEnd()) { //dyn select
?>
                <option value="<?php echo($funds->getColumnVal("fundID")); ?>"><?php echo($funds->getColumnVal("fundID")); ?>: <?php echo($funds->getColumnVal("fund")); ?></option>
                <?php
  $funds->moveNext();
} //dyn select
$funds->moveFirst();
?>
      </select>
    </div>
  </div>
<div class="row">
    <div class="col mb-2"> 
            <label for="fund">Department ID#:</label>
             <input type="text" name="funding_department2" id="funding_department2" class="form-control input-md" autocomplete="off" value="" required>
    </div></div>
<button type="submit" name="submit2" id="submit2" class="btn-lg btn-info">Search</button>   
    </form>

Here is the script and modal:

<script>
    $(document).ready(function() {
  $('#frm').on('submit2', function(e){
      $('#myLargeModalLabel').modal('show');
      e.preventDefault();
  });
});
</script>
   <!-- Large modal -->
<div class="modal fade bd-example-modal-lg" tabindex="-1" id="myLargeModalLabel" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content p-4">
     <h4 class="modal-title">Budget Summary</h4>For Account: <?php echo $_GET['account2']; ?>, Fund: <?php echo $fund; ?>, DeptID#: <?php echo $deptID; ?><br><em>The budgeted balance is an estimate.</em></h4>
      <br>  <?php if ($budget_summary->TotalRows == 0) { // Show if mysqli recordset empty ?>There is no data. Please try your search again.<?php } ?>
        <?php if ($budget_summary->TotalRows > 0) { // Show if mysqli recordset empty ?><table width="100%" class="table table-responsive" border="0" cellspacing="2" cellpadding="6" class="display" id="example2">
            <thead>
              <tr>
                <th align="left" valign="top">Budgeted Amount</th>
                 <th align="left" valign="top">Budgeted Balance</th>
                 <th align="left" valign="top">Program</th>
                </tr>
            </thead>
            <tbody>
              <?php
while(!$budget_summary->atEnd()) {
?><tr>
<td valign="top">$<?php echo($budget_summary->getColumnVal("budgeted_amount")); ?></td>
<td valign="top">$<?php echo($budget_summary->getColumnVal("budgeted_balance")); ?></td>
<td valign="top"><?php echo($budget_summary->getColumnVal("program")); ?></td>
                  </tr>
                <?php
  $budget_summary->moveNext();
}
$budget_summary->moveFirst(); //return RS to first record
?>
            </tbody>
          </table><?php } ?>
          <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Here is the SQL query:

<?php
$fund = mysqli_real_escape_string($sa, $_GET["fund2"]);
$account = mysqli_real_escape_string($sa, $_GET["account2"]);
$deptID = mysqli_real_escape_string($sa, $_GET["funding_department2"]);
$budget_summary = new WA_MySQLi_RS("budget_summary",$sa,0);
$budget_summary->setQuery("SELECT * from budget_summary where fund = ? and account = ? and deptID = ?");
$budget_summary->bindParam("i", "".$fund ."", "-1"); //colname
$budget_summary->bindParam("i", "".$account ."", "-1"); //colname2
$budget_summary->bindParam("i", "".$funding_department ."", "-1"); //colname3
$budget_summary->execute();
?>

Answer

You have things out of sequence. The select/submit button should trigger a back-end operation to retrieve the data from the database (through an ajax request), which would then return the data to your page as JSON which you could parse in javascript into HTML- OR – instead of returning JSON data, you could return the HTML for your modal. Maybe something like this

$(document).ready(function() {
  $('#frm').submit(function(e){
     // gather your inputs 
      var url="backend-php.php";
      $.ajax({
        url: url, // your back-end PHP script, will return the HTML needed
        method: 'GET',
        data : {
           account2: $('#account2').val(),
           fund2: $('#fund2').val(),
           funding_department2: $('#funding_department2').val(),
        },
        success: function(result){
           $('#myLargeModalLabelHTML').html(result)         
           $('#myLargeModalLabel').modal('show');
        }
     })
      e.preventDefault();
  });
});

Your MOdal HTML could become:

<!-- Large modal -->
<div class="modal fade bd-example-modal-lg" tabindex="-1" id="myLargeModalLabel" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content p-4" id="myLargeModalLabelHTML">
     <!-- everything will go in here -->
    </div>
    <div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div>
  </div>
</div>

and your PHP script, something like:

<?php

function getModalHtml() {
$budget_summary = new WA_MySQLi_RS("budget_summary",$sa,0);
$budget_summary->setQuery("SELECT * from budget_summary where fund = ? and account = ? and deptID = ?");
$budget_summary->bindParam("i", $_GET["fund2"], "-1"); //colname
$budget_summary->bindParam("i", $_GET["account2"], "-1"); //colname2
$budget_summary->bindParam("i", $_GET["funding_department2"], "-1"); //colname3
$budget_summary->execute();
?>

<h4 class="modal-title">Budget Summary</h4>For Account: <?php echo $_GET['account2']; ?>, Fund: <?php echo $fund; ?>, DeptID#: <?php echo $deptID; ?><br><em>The budgeted balance is an estimate.</em></h4>
          <br>  <?php if ($budget_summary->TotalRows == 0) { // Show if mysqli recordset empty ?>There is no data. Please try your search again.<?php } ?>
            <?php if ($budget_summary->TotalRows > 0) { // Show if mysqli recordset empty ?><table width="100%" class="table table-responsive" border="0" cellspacing="2" cellpadding="6" class="display" id="example2">
                <thead>
                  <tr>
                    <th align="left" valign="top">Budgeted Amount</th>
                     <th align="left" valign="top">Budgeted Balance</th>
                     <th align="left" valign="top">Program</th>
                    </tr>
                </thead>
                <tbody>
                  <?php
    while(!$budget_summary->atEnd()) {
    ?><tr>
    <td valign="top">$<?php echo($budget_summary->getColumnVal("budgeted_amount")); ?></td>
    <td valign="top">$<?php echo($budget_summary->getColumnVal("budgeted_balance")); ?></td>
    <td valign="top"><?php echo($budget_summary->getColumnVal("program")); ?></td>
                      </tr>
                    <?php
      $budget_summary->moveNext();
    }
    $budget_summary->moveFirst(); //return RS to first record
    ?>
                </tbody>
              </table><?php } ?>
             

          <?php }?>