I'd be grateful for a review of my AJAX request. If I have taken the correct approach here and especially any security concerns!
I am creating a Purchase Order system for my manager (as part of an apprenticeship I am doing).
There is a select html element where a supplier can be selected. I also have a button to trigger a bootstrap modal with a form to enter a new supplier. I have an AJAX request to add the new supplier to the database then a chain AJAX request to query the database so the select element can be updated.
<script>
window.addEventListener('DOMContentLoaded', function () {
// User can add a new supplier using a modal form.
// 1) Send an AJAX POST request to update the database
// 2) Send AJAX GET request to query the database
// 3) Repopulate the select element with the updated records.
document.getElementById("newSupplierModalForm").addEventListener('submit', function (e) {
// Send AJAX request to add new supplier.
// TODO: Validate name field has text and handle error.
e.preventDefault();
const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
const xhr = new XMLHttpRequest();
xhr.open('POST', '/supplier', true);
// Set headers
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader('X-CSRF-Token', token);
//Set paramaters
const params = new URLSearchParams();
params.set("name", document.getElementById('supName').value);
params.set("address_1", document.getElementById('supAddress_1').value);
params.set("address_2", document.getElementById('supAddress_2').value);
params.set("town", document.getElementById('supTown').value);
params.set("post_code", document.getElementById('supPost_code').value);
params.set("contact_name", document.getElementById('supContact_name').value);
params.set("contact_tel", document.getElementById('supContact_tel').value);
params.set("contact_email", document.getElementById('supContact_email').value);
// Logic
xhr.onload = function (e) {
if (xhr.status === 200) {
// Close modal
document.getElementById('addSuppModalClose').click();
// AJAX request for updated supplier records to repopulate select element.
const xhr_getSuppliers = new XMLHttpRequest();
xhr_getSuppliers.open('GET', '/getSuppliers', true);
// Set headers
xhr_getSuppliers.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr_getSuppliers.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr_getSuppliers.setRequestHeader('X-CSRF-Token', token);
// Logic
xhr_getSuppliers.onload = function (e) {
if (xhr.status === 200) {
const data = JSON.parse(xhr_getSuppliers.response);
const selectElem = document.getElementById('supplier');
selectElem.options.length = 0; //reset options
// populate options
for (index in data) {
console.log(data[index], index);
selectElem.options[selectElem.options.length] = new Option(data[index], index);
}
}
};
// Send GET Request
xhr_getSuppliers.send();
} else {
// Show alert if AJAX POST Request does not receive a 200 response.
// I need to write code to feed this back to the user later.
alert(xhr.response);
};
};
// Send POST Request
xhr.send(params.toString());
});
});
</script>
```