website/assets/js/bestellformular.js

window.onload = function () {

    const FORMDEBUG = true;

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

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

    function setUserInteracted() {
        userInteracted = true;
    }

    // Eventlistener für Interaktionen - setzt userInteracted auf true bei Interaktion
    document.addEventListener("mousedown", setUserInteracted);
    document.addEventListener("touchstart", setUserInteracted);
    document.addEventListener("keydown", setUserInteracted);

    document.getElementById('formular').addEventListener('submit', function (e) {
        
        e.preventDefault(); 

        const form = e.target;
        const notification = document.getElementById('notification');
        const btn = document.getElementById('bestellformular-btn');
        const zsrTooltip = document.getElementById('zsr-tooltip');
        
        var endTime = Date.now();
        var timeSpent = (endTime - startTime) / 1000; // Zeit in Sekunden
        
        // Setze die Werte für die Botvalidierung zum Auswerten in PHP
        document.getElementById("age").value = timeSpent;
        document.getElementById("hobbies").value = userInteracted ? "true" : "false";
        
        // Validierung der ZSR-Nummer
        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
            zsrTooltip.className = 'input-tooltip';
            // Scroll to the tooltip element
            zsrTooltip.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
            return;
        }
        
        if (FORMDEBUG) {
            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): " + document.getElementById("verify_email").value);
        }
        
        // Formulardaten an den Server senden
        const data = new FormData(form);
        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
                // TODO Nachricht anpassen wenn französische Version
                notification.textContent = 'Bestellformular 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
            });
    });
};