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); function calculate_and_display_sum() { setTimeout(() => { let number_of_drinks = parseFloat(order_number_of_drinks_input.value); if (isNaN(number_of_drinks)) { number_of_drinks = 1; } 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! if (isNaN(parseFloat(order_number_of_drinks_input.value))) { order_number_of_drinks_input.value = 1; } 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); }); })