Solution 1 :

PRG Pattern

The first thing that caught my eye was not related to your actual issue, but does play a part in debugging. What caught my eye was

if (isset($_POST['search_button'])){

after HTML output was already started. Rule of thumb, POST variables should be worked with at the top, and always redirected (except ajax). Check out the Post-Redirect-Get pattern.

However, in this case you should be using GET because you aren’t changing data, just reading specific data.

Which leads me to the debugging step

Separate Logic and Presentation

Perform all your logic first, and then when that is all done, close out php and write your html (presentation), using php only for templating (loops, filling in variables, minor presentation conditionals)

This is extremely helpful when debugging, because you don’t have to dig through extraneous html code.

So your code could be reordered to be like this:

<?php

if (isset($_GET['search_button'])){
    require_once "/home/users/web/b1240/dom.heather93124/public_html/resources/config.php";
    
    $fName = $_GET['fName'];
    $lName = $_GET['lName'];
    
// more code here
}
// any other code here
?>
<html>
    <!— and so forth —>

Prepared Statements

The time to learn better security is now. This query is wide open to sql injection. Never, never, never put a raw variable into a query. You should be using prepared statements, where the user data is treated separately from the query. This example assumes you have a PDO connection $pdo.

$stmt = $pdo->prepare("SELECT * FROM Customers Where FirstName LIKE ? AND  LastName LIKE ?");
$stmt->execute(
    [
        $_GET['fName'],
        $_GET['lName']
    ]
);

// iterate through results with $stmt->fetch()

Incorporating this change will fix the error in your code. ($search->fetch... is an error)

Wrapping It Up

<?php

if (isset($_GET['search_button'])) {
    require_once "/home/users/web/b1240/dom.heather93124/public_html/resources/config.php";

    $stmt = $pdo->prepare("SELECT * FROM Customers WHERE FirstName = ? AND  LastName = ?");
    $stmt->execute(
        [
            $_GET['fName'],
            $_GET['lName']
        ]
    );
}
?>
<HTML>
... snip ...

     <div class="form-popup" id="newApp">
        <form  method="get" class="form-container">
            <h1>New Appointment</h1>
            <label for="emp_select"><b>Select Employee</b></label>
                <select id = "emp_select" name="emp_select0">
                    <?php
                        include "/home/users/web/b1240/dom.heather93124/public_html/resources/employee.php";
    
                    ?>
    
                </select><br>
            <input type="text" name="fName" id="fName" placeholder="First name">
            <input type="text" name="lName" id="lName" placeholder="Last name"><br>
            <input type="button" class = "btn" value="Search" name="search_button"></button><br>  
            <select id = "custSelect" name="custSelect0">
            <?php while($row = $stmt->fetchObject()): ?>
                <option value="<?= $row->CustId ?>"><?= $row->fName ?> <?= $row->lName ?></option>
            <?php endwhile; ?>

... snip ...

Note that this is not tested, you may have to adjust the pdo options to your taste.

Solution 2 :

I was able to get it all figured out. Here it is.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="form-popup" id="newApp">
    <form  method="post" class="form-container" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
        <h1>New Appointment</h1>
        <label for="emp_select"><b>Select Employee</b></label>
            <select id = "emp_select" name="emp_select0">
                <?php
                    include "/home/users/web/b1240/dom.heather93124/public_html/resources/employee.php";

                ?>
            </select><br>

        <input type="text" name="lName" id="lName" placeholder="Last name" onkeyup="showCustomer(this.value)"><br>

        <select id = "custSelect" name="custSelect" onchange="adrSelect(this)">
            <option value="">-- Select Customer--</option>

        </select><br>
        <input type="text" id="cust_id" name="cust_id" placeholder="Customer ID" readonly>
        <input type="text" id="custName" name="custName" placeholder="Customer Name" readonly><br>

        <input stlye="backroundColor:#00000020" placeholder="000-000-00000" type="tel" id="newPhone" name="newPhone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
        <input stlye="backroundColor:#00000020" placeholder="000-000-00000" type="tel" id="newAltPhone" name="newPhone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"><br>

        <select id="addrSelect" name="addrSelect" onchange="addrPicker(this)">
          <option value="">-- Select Customer address--</option>
        </select><br>

        <input type="text" placeholder="#### Street Name" name="newStreet" id="newStreet"  size="40"><br>
        <input type="text" PlaceHolder="City" name="newCity" id="newCity" size="10">
        <input type="text" placeholder="State" name="newState" id="newState" size="5">
        <input type="text" placeholder="Zip" name="newZip" id="newZip" size="5"><br>

        <label for="startDate"><b>Start Date</b></label>
        <input type="date"  name="startDate" id="newStartDate" required><br>

        <label for="startTime"><b>Time</b></label>
        <input type="time"  name="startTime" id="newStartTime" required><br>

        <label for="endDate"><b>End Date</b></label>
        <input type="date"  name="endDate" id="newEndDate"><br>

        <label for="endTime"><b>Time</b></label>
        <input type="time"  name="endTime" id="newEndTime" ><br>

        <label for="status_select"><b>Appointment Status</b></label>
            <select id = "status_select0"name="status_select0">
                <?php
                    include "/home/users/web/b1240/dom.heather93124/public_html/resources/aptStatusSel.php";

                ?>
            </select><br>

        <label for="newReason"><b>Description</b></label><br>
        <input type="text" name="newReason" id="newReason" size="55"><br>

        <button type="submit" class="btn" name="newAppSubmit">Submit</button>
        <input type="reset" class="btn cancel">
        <button type="submit" class="btn cancel" onclick="closeFormNewApp()">Cancel</button>
      </form>
    </div>


    <script>
    function showCustomer(str) {
          //alert("click");
          var LastName = str;
          //var ele = document.getElementById('custSelect');
       //alert (LastName);
       $.ajax({
            url:"getcustomer.php",
            type:"POST",
            data:{customer:LastName},
            dataType: "json",

            success:function(data){
                //alert("Data: " + data + "nStatus: " + status);

                        $('#custSelect').empty();
                        $('#custSelect').append($('<option>').text("---Select Customer---"));
                        $.each(data, function(key, entry){
                          //alert (key + ":" + entry)
                           $('#custSelect').append($('<option></option>').attr('value', entry.custId).text(entry.fname + " " + entry.lname + " -- " + entry.phone));
                          });
                        }
                      });
                    }


        function adrSelect(ele) {
          // GET THE SELECTED VALUE FROM <select> ELEMENT AND populate form with values related to customer.

          let custID = ele.value;
          //alert(custID);
          $.ajax({
            url: "getPhone.php",
            type: "POST",
            data:{custID:custID},
            dataType: "json",

            success:function(data){
                  //alert("Data: " + data + "nStatus: " + status);
                  $.each(data,function(key, entry){
                    $('#cust_id').val(entry.custId);
                    $('#custName').val(entry.fname + " " + entry.lname);
                    $('#newPhone').val(entry.phone);
                    $('#newAltPhone').val(entry.altPhone);
                    var custID = $('#cust_id').val();
                    //alert (custID);
                    $.ajax({
                         url:"custAddr.php",
                         type:"POST",
                         data:{custID:custID},
                         dataType: "json",

                         success:function(info){


                                     $('#addrSelect').empty();
                                     $('#addrSelect').append($('<option>').text("---Select Customer Address---"));
                                     $.each(info, function(key, entry){
                                       //alert (key + ":" + entry)
                                        $('#addrSelect').append($('<option></option>').attr('value', entry.propID).text(entry.street + ", " + entry.city + ", " + entry.state + " " + entry.zip));
                                       });
                                     }
                                   });
                                 });
                               }
                             });
                           }

        function addrPicker(ele){
          let propID = ele.value;
          //alert (propID);
          $.ajax({
            url: "addrPicker.php",
            type: "POST",
            data:{propID:propID},
            dataType: "json",

            success:function(data){
              //alert("Data: " + data + "nStatus: " + status);
              $.each(data, function(key, entry){
                $('#newStreet').val(entry.street);
                $('#newCity').val(entry.city);
                $('#newState').val(entry.state);
                $('#newZip').val(entry.zip);
              });
            }
          });
        }


    </script>

And then the scripts that are called are all pretty similar to below just adapted to that part of the code where it is called. This one is the addrPicker.php

<?php
  //login to database
  require_once "/home/users/web/b1240/dom.heather93124/public_html/resources/configPDO.php";

  if (isset($_POST['propID'])){
    //Get value of custID variable
    $propID = $_POST['propID'];

    //Declare data variable as array
    $data = array();

    try{
      //SQL query PDO
      $sql = "SELECT * FROM `custAdr` WHERE `propID` = :propID";
      //Set cust ID variable as wildcard
      //$custID = "%$custID%";
      $stmt = $connect->prepare($sql);
      //bind wildcard to sql statements
      $stmt->bindValue(':propID', $propID);
      //Execute sql statements
      $stmt->execute();

      //create associative array with results from query
      while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
        $data[] = array(
          'propID' => $row["propID"],
          'street' => $row["streetAdr"],
          'city' => $row["city"],
          'state' => $row["state"],
          'zip' => $row["zip"],

        );
        }

    //echo results back to ajax success function
    echo json_encode($data);
    //catch errors from try statement
    }catch(Exception $e){
      echo $e-getMessage();
    }
}

?>

Problem :

I am trying to make a form where the user can fill in the last name of a customer, the program then needs to use the entered name to search the database for any customers with the same last name. Then the select form element needs to be populated with the results form the query allowing the user to select the correct customers info. After the correct customer is selected another query needs to be done to search a separate table to get all addresses associated with the customer ID of the selected customer.

Flow
*User enters Customer last name
*query to get all customers with same last name
**select box populated with customer data
*User selects correct customer
*query to find all addresses with same Customer ID
**separate select box populated with 2nd query results

I would like to accomplish this with ajax

Comments

Comment posted by Tim Morton

There are several issues to deal with, which I will address in an answer once we narrow down the exact cause. Could you edit your post to show the form tag

Comment posted by primo4e

Tim Morton–I have included the whole form now

Comment posted by Serghei Leonenco

You have to consider using

Comment posted by primo4e

Serghei Leonenco– I would love to switch to AJAX just know next to nothing about it at the moment. I will work on improving security as I go.

Comment posted by primo4e

I have found a section in one of my books on AJAX so I will be learning up on it and will try somethings out.

Comment posted by mickmackusa

Review of your review: do not use

Comment posted by Serghei Leonenco

@mickmackusa I don’t agree with you about not using

Comment posted by mickmackusa

That is certainly your prerogative @Serg I find proper indentation to be sufficient …especially when the loop body only contains one line of code.

Comment posted by stackoverflow.com/a/41426713/2943403

Also, the iterated calls of

Comment posted by mickmackusa

To clarify about the appropriate request type to use…

By