如何使用 AJAX 調用 php function 顯示基於輸入的 ZFC35FDC70D5FC69D269883A82C

Question

在我的表單中，我有一個復選框，我想用它來觸發顯示更多字段。 這些字段將基於一組變量。 據我了解，AJAX 將是最好的，但我不知道如何/從哪里開始。 理想情況下，這是在提交 mysql 更新之前實時完成的。

這是我的輸入： <input type="checkbox" name="emp_acd" id="emp_acd" value="Y" onclick="showACD()" <?php if (,(strcmp($row_employees['emp_acd'];"Y"))) {echo "checked=\"checked\""?} ?> >

在意識到 php 無法實時檢查狀態之前，這是我嘗試使用的 php 代碼：

if(file_exists($existing_acd) && (isset($_POST['emp_acd']) || $row_employees['emp_acd'] == 'Y')){
    echo '<a href="//www/Departments/HR/documents/Advance%20Care%20Directives/' . $row_employees['emp_fname'] . ' ' . $row_employees['emp_lname'] . '.pdf" class="view_acd">View Current ACD</a>';
} elseif (!empty($row_employees['emp_acd_file'] && (isset($_POST['emp_acd']) || $row_employees['emp_acd'] == 'Y')){
    echo '<a href="' . $row_employees['emp_acd_file'] . '" class="view_acd">View Current ACD</a>';
} else {
    echo '<label for="emp_acd_file" id="acd_up_label" class="button" style="display:none; float: left; width: 80%;">Upload ACD</label>';
    echo '<input type="file" name="emp_acd_file" class="file_upload" id="emp_acd_file" style="display:none;">';
} 

$existing_acd = dirname(__DIR__,3) . '\Departments\HR\documents\Advance Care Directives\\' . $row_employees['emp_fname'] . ' ' . $row_employees['emp_lname'] . '.pdf';

這個想法是，一旦復選框被選中（或之前選中），php 將檢查文件是否已經存在，然后顯示文件的鏈接。 如果文件不存在並且復選框被選中，則顯示文件上傳。

我在這里使用的onclick function 更適合風格，但是，我嘗試添加alert以觸發我的 php 代碼無濟於事

<script>
        function showACD() {
            // Get the checkbox
            var checkBox = document.getElementById("emp_acd");
            // Get the output text
            var input = document.getElementById("acd_up_label");

            // If the checkbox is checked, display the output text
            if (checkBox.checked == true){
                alert("<?php showMore(); ?>");
                input.style.display = "block";
                checkBox.style.cssFloat ="left";
                checkBox.style.margin ="4px 20px 0px 0px";
            } else {
                input.style.display = "none";
                checkBox.style.cssFloat ="none";
                checkBox.style.marginRight ="4px auto 0px";
            }
        }
    </script>

然后將我的 php 代碼更改為：

<?php function showMore(){
    if(file_exists($existing_acd) && (isset($_POST['emp_acd']) || $row_employees['emp_acd'] == 'Y')){
        echo '<a href="//www/Departments/HR/documents/Advance%20Care%20Directives/' . $row_employees['emp_fname'] . ' ' . $row_employees['emp_lname'] . '.pdf" class="view_acd">View Current ACD</a>';
    } else {
        echo '<label for="emp_acd_file" id="acd_up_label" class="button" style="display:none; float: left; width: 80%;">Upload ACD</label>';
        echo '<input type="file" name="emp_acd_file" class="file_upload" id="emp_acd_file" style="display:none;">';
    } 
}?>

Answer 1

如果我正確地回答了您的問題並考慮了它-您根本不需要任何復選框。

創建emp_acd.php文件：

<?php
if (
  $_SERVER['REQUEST_METHOD'] === 'GET'
) {

  // Other necessary $row_employees code here....

  $dir = dirname(__DIR__, 3);
  $emp_fname = $row_employees['emp_fname'];
  $emp_lname = $row_employees['emp_lname'];
  $emp_acd   = $row_employees['emp_acd'];

  $existing_acd = "$dir/Departments/HR/documents/Advance Care Directives/$emp_fname $emp_lname.pdf";

  // Send response data to AJAX call:

  $response = [
    "emp_acd_file" => $existing_acd,
    "emp_acd_file_exists" => file_exists($existing_acd),
    "emp_acd"   => $emp_acd,
    "emp_fname" => $emp_fname,
    "emp_lname" => $emp_fname,
  ];

  echo json_encode($response);
  exit;
}

現在對於 JavaScript，使用Fetch API 。
在 JS 中創建一個 function 將與 PHP 通信。 我們稱之為get_emp_acd

const get_emp_acd = () => fetch("emp_acd.php").then((res) => res.json());

並添加一個 function ，它將反映從 PHP 返回的 JSON 數據 - 並相應地隱藏/顯示/生成元素：

const handle_emp_acd_form = () => get_emp_acd().then((res) => {
  console.log(res); // The JSON response from PHP
  // Your form logic goes here
  // Hide / show / create elements according to the returned `res` data
});

無論您需要在哪里處理表格 HTML 元素，請調用：

handle_emp_acd_form();