website/assets/js/bestellformular.js

window.onload = function () {
    document.getElementById('formular').addEventListener('submit', function (e) {
        e.preventDefault(); // Verhindert die Standard-Formularsendung
        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');
        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
            });
    });
};