drinks-manager/app/static/js/deposit.js

document.addEventListener("DOMContentLoaded", () => {

    // elements

    let depositForm = document.getElementById("depositform");
    let statusInfo = document.getElementById("statusinfo");
    let depositSubmitButton = document.getElementById("depositsubmitbtn");

    // event listener for deposit form
    // this implements a custom submit method

    depositForm.addEventListener("submit", (event) => {

        depositSubmitButton.disabled = true;

        event.preventDefault(); // Don't do the default submit action!

        let xhr = new XMLHttpRequest();
        let formData = new FormData(depositForm);

        xhr.addEventListener("load", (event) => {

            status_ = event.target.status;
            response_ = event.target.responseText;

            if (status_ == 200 && response_ == "success") {
                statusInfo.innerText = "Success. Redirecting soon.";
                window.location.replace("/");
            }
            else {
                statusInfo.classList.add("errortext");
                statusInfo.innerText = "An error occured. Redirecting in 5 seconds...";
                window.setTimeout(() => { window.location.replace("/") }, 5000);
            }

        })

        xhr.addEventListener("error", (event) => {
            statusInfo.classList.add("errortext");
            statusInfo.innerText = "An error occured. Redirecting in 5 seconds...";
            window.setTimeout(() => { window.location.replace("/") }, 5000);
        })

        xhr.open("POST", "/api/deposit");
        xhr.send(formData);

    });
    
})