将 GET 变量传递给模态以在查询中使用

Question

我正在尝试构建一个预算查找工具。我有一个表格，其中有人输入帐户#、基金# 和 deptID#。当他们点击搜索时，它会打开一个模式并显示 table 与输入的基金、账户和部门 ID 相匹配的预算余额。

我可以打开模式，但是，我似乎无法将数据传递给模式并根据 SQL 查询显示数据。这是我的代码：

表格如下：

<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>

这是脚本和模态：

<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>

这里是 SQL 查询：

<?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 1

你的顺序乱了。 select/submit 按钮应触发后端操作以从数据库中检索数据（通过 ajax 请求），然后 return 将数据作为 JSON 您可以在 javascript 中将其解析为 HTML- 或 - 而不是 returning JSON 数据，您可以 return 为您的 HTML模态。也许是这样的

$(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();
  });
});

您的 MODal HTML 可能会变成：

<!-- 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>

和您的 PHP 脚本，例如：

<?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 }?>

将 GET 变量传递给模态以在查询中使用

Pass GET Variable to Modal to use in Query

php

sql

forms

modal-dialog