75 lines
No EOL
2.5 KiB
JavaScript
75 lines
No EOL
2.5 KiB
JavaScript
document.addEventListener("DOMContentLoaded", () => {
|
|
|
|
// elements
|
|
|
|
let order_number_of_drinks_input = document.getElementById("numberOfDrinks");
|
|
let order_number_of_drinks_btn_a = document.getElementById("numberOfDrinksBtnA");
|
|
let order_number_of_drinks_btn_b = document.getElementById("numberOfDrinksBtnB");
|
|
let order_sum_element = document.getElementById("orderCalculatedSum");
|
|
|
|
let order_form = document.getElementById("orderForm");
|
|
let status_info = document.getElementById("statusInfo");
|
|
let order_submit_button = document.getElementById("orderSubmitBtn");
|
|
|
|
|
|
// calculate & display sum
|
|
|
|
let order_price_per_drink = parseFloat(document.getElementById("pricePerDrink").dataset.drinkPrice.replace(",", "."));
|
|
|
|
function calculate_and_display_sum() {
|
|
|
|
setTimeout(() => {
|
|
|
|
let number_of_drinks = parseFloat(order_number_of_drinks_input.value);
|
|
let calculated_sum = order_price_per_drink * number_of_drinks;
|
|
order_sum_element.innerText = new Intl.NumberFormat(undefined, {minimumFractionDigits: 2}).format(calculated_sum);
|
|
|
|
}, 25);
|
|
|
|
}
|
|
|
|
order_number_of_drinks_input.addEventListener("input", calculate_and_display_sum);
|
|
order_number_of_drinks_btn_a.addEventListener("click", calculate_and_display_sum);
|
|
order_number_of_drinks_btn_b.addEventListener("click", calculate_and_display_sum);
|
|
|
|
|
|
// custom submit method
|
|
|
|
order_form.addEventListener("submit", (event) => {
|
|
|
|
order_submit_button.disabled = true;
|
|
|
|
event.preventDefault(); // Don't do the default submit action!
|
|
|
|
let xhr = new XMLHttpRequest();
|
|
let formData = new FormData(order_form);
|
|
|
|
xhr.addEventListener("load", (event) => {
|
|
|
|
status_ = event.target.status;
|
|
response_ = event.target.responseText;
|
|
|
|
if (status_ == 200 && response_ == "success") {
|
|
status_info.innerText = "Success.";
|
|
window.location.replace("/");
|
|
}
|
|
else {
|
|
status_info.classList.add("errorText");
|
|
status_info.innerText = "An error occured.";
|
|
window.setTimeout(() => { window.location.reload() }, 5000);
|
|
}
|
|
|
|
})
|
|
|
|
xhr.addEventListener("error", (event) => {
|
|
status_info.classList.add("errorText");
|
|
status_info.innerText = "An error occured.";
|
|
window.setTimeout(() => { window.location.reload() }, 5000);
|
|
})
|
|
|
|
xhr.open("POST", "/api/order-drink");
|
|
xhr.send(formData);
|
|
|
|
});
|
|
|
|
}) |