website/assets/js/bestellformular.js

window.onload = function () {

    // initieiere Zeitmessung zur Botprevention
    var startTime = Date.now();

    // Messe ob mit der Seite agiert wird
    var userInteracted = false;

    function setUserInteracted() {
        userInteracted = true;
    }

    document.addEventListener("mousedown", setUserInteracted);
    document.addEventListener("touchstart", setUserInteracted);
    document.addEventListener("keydown", setUserInteracted);

    document.getElementById('formular').addEventListener('submit', function (e) {
        e.preventDefault(); // Verhindert die Standard-Formularsendung

        var honeyPot = document.getElementById("verify_email").value;

        var endTime = Date.now();
        var timeSpent = (endTime - startTime) / 1000; // Zeit in Sekunden
        document.getElementById("age").value = timeSpent;

        document.getElementById("hobbies").value = userInteracted ? "true" : "false";

        const form = e.target;
        const zsrNummer = form.elements['zsr_nummer'].value;
        const isNumberOrBeantragt = /^\d+$|^beantragt$/i.test(zsrNummer);
        // TODO REGEX für ZSR-Nummer
        if (!isNumberOrBeantragt) {
            // Display error message for invalid zsr_nummer
            const tooltip = document.getElementById('tooltip');
            tooltip.className = 'input-tooltip';
            // Scroll to the tooltip element
            tooltip.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
            return;
        }
        
        const data = new FormData(form);
        const notification = document.getElementById('notification');
        const btn = document.getElementById('bestellformular-btn');
        console.log("userInteracted: " + userInteracted);
        console.log("timeSpent: " + timeSpent);
        console.log("hobbies: " + document.getElementById("hobbies").value);
        console.log("age: " + document.getElementById("age").value);
        console.log("verify_email: " + honeyPot);

        fetch(form.action, {
            method: 'POST',
            mode: 'cors',
            body: data,
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                // Erfolgsnachricht anzeigen
                notification.textContent = 'Nachricht erfolgreich gesendet!';
                btn.className = 'submitbutton text-white mx-auto submit-after-valid-captchaaaa fadeOut';
                setTimeout(() => {
                    btn.style.visibility = 'hidden';
                    btn.style.display = 'none';
                    notification.style.visibility = 'visible';
                    notification.style.display = 'block';
                    notification.classList.remove('fadeIn'); // Remove fadeIn class
                    void notification.offsetWidth; 
                    notification.className = 'bg-green-500 text-white px-4 py-2 rounded block fadeIn';
                }, 1000);
                // setTimeout(() => notification.className = 'bg-green-500 text-white px-4 py-2 rounded hidden', 5000); // Benachrichtigung nach 5 Sekunden ausblenden
            })
            .catch((error) => {
                // Fehlermeldung anzeigen
                notification.textContent = 'Fehler beim Senden der Nachricht.';
                console.log(error);
                notification.className = 'bg-red-500 text-white px-4 py-2 rounded block';
                // setTimeout(() => notification.className = 'bg-red-500 text-white px-4 py-2 rounded hidden', 5000); // Benachrichtigung nach 5 Sekunden ausblenden
            });
    });
};