如何使用 AJAX 调用 php function 显示基于输入的 ZFC35FDC70D5FC69D269883A82C

Question

In my form I have a checkbox that I want to use to trigger showing more fields. Those fields would be based on a set of variables. From my understanding is that AJAX would be the best to do this, but I'm not sure how/where to start with it. Idealy this is done in real time prior to submitting for a mysql update.

Here is my input: <input type="checkbox" name="emp_acd" id="emp_acd" value="Y" onclick="showACD()" <?php if (,(strcmp($row_employees['emp_acd'];"Y"))) {echo "checked=\"checked\""?} ?> >

Before realizing that php couldn't check the status in real-time, this is the php code I was attempting to use:

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

The idea being that once the checkbox is checked (or previously checked), php would check if a file already existed, then show a link to the file. If the file doesn't exist and the checkbox is checked, then show a file upload.

The onclick function I'm using here is more for style, however, i tried adding an alert to trigger my php code to no avail

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

and then changing my php code to:

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

If I got your question correctly, and thinking about it - you don't need any checkbox at all.

Create a emp_acd.php file:

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

Now for JavaScript, using the Fetch API .
Create a function in JS that will communicate with PHP. Let's call it get_emp_acd

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

and add a function that will reflect that returned JSON data from PHP - and hide / show / generate elements accordingly:

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

Wherever you need to handle the form HTML elements call:

handle_emp_acd_form();