55 lines
2.7 KiB
JavaScript
55 lines
2.7 KiB
JavaScript
document.addEventListener("DOMContentLoaded", () => {
|
|
// elements
|
|
let orderNumberofdrinksInput = document.getElementById("numberofdrinks");
|
|
let orderNumberofdrinksBtnA = document.getElementById("numberofdrinks-btn-minus");
|
|
let orderNumberofdrinksBtnB = document.getElementById("numberofdrinks-btn-plus");
|
|
let orderSumElement = document.getElementById("ordercalculatedsum");
|
|
let orderFormElement = document.getElementById("orderform");
|
|
let statusInfoElement = document.getElementById("statusinfo");
|
|
let orderSubmitButton = document.getElementById("ordersubmitbtn");
|
|
// calculate & display sum
|
|
let orderPricePerDrink = parseFloat(document.getElementById("priceperdrink").dataset.drinkPrice);
|
|
function calculateAndDisplaySum() {
|
|
setTimeout(() => {
|
|
let numberOfDrinks = parseFloat(orderNumberofdrinksInput.value);
|
|
if (isNaN(numberOfDrinks)) {
|
|
numberOfDrinks = 1;
|
|
}
|
|
let calculated_sum = orderPricePerDrink * numberOfDrinks;
|
|
orderSumElement.innerText = new Intl.NumberFormat(undefined, {minimumFractionDigits: 2}).format(calculated_sum);
|
|
}, 25);
|
|
}
|
|
orderNumberofdrinksInput.addEventListener("input", calculateAndDisplaySum);
|
|
orderNumberofdrinksBtnA.addEventListener("click", calculateAndDisplaySum);
|
|
orderNumberofdrinksBtnB.addEventListener("click", calculateAndDisplaySum);
|
|
// custom submit method
|
|
orderFormElement.addEventListener("submit", (event) => {
|
|
orderSubmitButton.disabled = true;
|
|
event.preventDefault(); // Don't do the default submit action!
|
|
if (isNaN(parseFloat(orderNumberofdrinksInput.value))) {
|
|
orderNumberofdrinksInput.value = 1;
|
|
}
|
|
let xhr = new XMLHttpRequest();
|
|
let formData = new FormData(orderFormElement);
|
|
xhr.addEventListener("load", (event) => {
|
|
status_ = event.target.status;
|
|
response_ = event.target.responseText;
|
|
if (status_ == 200 && response_ == "success") {
|
|
statusInfoElement.innerText = "Success.";
|
|
window.location.replace("/");
|
|
}
|
|
else {
|
|
statusInfoElement.classList.add("errortext");
|
|
statusInfoElement.innerText = "An error occured.";
|
|
window.setTimeout(() => { window.location.reload() }, 5000);
|
|
}
|
|
})
|
|
xhr.addEventListener("error", (event) => {
|
|
statusInfoElement.classList.add("errortext");
|
|
statusInfoElement.innerText = "An error occured.";
|
|
window.setTimeout(() => { window.location.reload() }, 5000);
|
|
})
|
|
xhr.open("POST", "/api/order-drink");
|
|
xhr.send(formData);
|
|
});
|
|
});
|