John Davidson

Message:

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

---

My Answer:
Here is an example of how you can achieve this using JavaScript and AJAX:

1. HTML form:
html

Enter Customer Last Name:

2. JavaScript code:
javascript
document.getElementById('last-name').addEventListener('input', function() {
var lastName = this.value;

// AJAX request to get customers with the same last name
var xhr = new XMLHttpRequest();
xhr.open('GET', 'getCustomers.php?lastName=' + lastName, true);
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 400) {
var customers = JSON.parse(xhr.responseText);
var customerSelect = document.getElementById('customer-select');
customerSelect.innerHTML = '';
customers.forEach(function(customer) {
var option = document.createElement('option');
option.text = customer.firstName + ' ' + customer.lastName;
option.value = customer.id;
customerSelect.add(option);
});
}
};
xhr.send();
});

document.getElementById('customer-select').addEventListener('change', function() {
var customerId = this.value;

// AJAX request to get addresses for the selected customer
var xhr = new XMLHttpRequest();
xhr.open('GET', 'getAddresses.php?customerId=' + customerId, true);
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 400) {
var addresses = JSON.parse(xhr.responseText);
var addressSelect = document.getElementById('address-select');
addressSelect.innerHTML = '';
addresses.forEach(function(address) {
var option = document.createElement('option');
option.text = address.street + ', ' + address.city + ', ' + address.state;
option.value = address.id;
addressSelect.add(option);
});
}
};
xhr.send();
});


3. PHP script (getCustomers.php):
php
$lastName = $_GET['lastName'];

// Perform query to get customers with the same last name
// Replace this with your actual database query
$customers = array(
array('id' => 1, 'firstName' => 'John', 'lastName' => $lastName),
array('id' => 2, 'firstName' => 'Jane', 'lastName' => $lastName)
);

echo json_encode($customers);
?>


4. PHP script (getAddresses.php):
php
$customerId = $_GET['customerId'];

// Perform query to get addresses for the selected customer
// Replace this with your actual database query
$addresses = array(
array('id' => 1, 'street' => '123 Main St', 'city' => 'New York', 'state' => 'NY'),
array('id' => 2, 'street' => '456 Elm St', 'city' => 'Los Angeles', 'state' => 'CA')
);

echo json_encode($addresses);
?>


Make sure to replace the placeholder database queries in the PHP scripts with your actual database queries. This code will dynamically populate the select boxes with the results from the AJAX queries based on user input.