DBP SIDING GEVELBEKLEDING

////////// eenheid field readonly /////////// document.addEventListener('DOMContentLoaded', function() { for (let i = 1; i <= 10; i++) { const inputId = 'form-field-eenheid' + i; const inputElem = document.getElementById(inputId); if (inputElem) { // Set the input as readonly and style the background color inputElem.readOnly = true; inputElem.style.background = '#ea504c'; // Find the parent container and the label associated with this input const parentDiv = inputElem.parentElement; const labelElem = parentDiv.querySelector(`label[for="${inputId}"]`); // If label exists, insert the input element before the label (switch positions) if (labelElem) { parentDiv.insertBefore(inputElem, labelElem); } } } });

////////// GLOBAL FLAG //////// let shouldSubmit = true; ////////// PREVENT ENTER KEY SUBMIT //////// document.addEventListener("DOMContentLoaded", function () { const form = document.querySelector("form[name='TIMBERPLUS_BESTELFORMULIER']"); const submitButton = document.getElementById("SUBMITBUTTON"); if (form) { // Prevent Enter key from submitting form.addEventListener("keydown", function (event) { if (event.key === "Enter") { event.preventDefault(); } }); } if (submitButton && form) { // MAIN SUBMIT BUTTON CLICK HANDLER submitButton.addEventListener("click", function (event) { shouldSubmit = true; // Reset flag every time ////// VALIDATE DROPDOWNS /////// const dropdowns = form.querySelectorAll("select[name*='VVU'], select[name*='VVI']"); for (let dropdown of dropdowns) { const isHidden = dropdown.closest('.cfef-hidden'); if (!isHidden) { if (dropdown.value === 'vul in') { event.preventDefault(); alert("Niet alle vakvullingen zijn ingevuld."); shouldSubmit = false; return; } } } ////// VALIDATE SLUITPOT /////// const sluitpotRadios = form.querySelectorAll("input[name='form_fields[sluitpot]']"); let sluitpotValue = ''; sluitpotRadios.forEach(radio => { if (radio.checked) { sluitpotValue = radio.value; } }); if (sluitpotValue === 'ja') { const xSluitpot = document.getElementById("form-field-X_sluitpot"); const ySluitpot = document.getElementById("form-field-Y_sluitpot"); if (!xSluitpot.value.trim() || !ySluitpot.value.trim()) { event.preventDefault(); alert("Vul de hartafstand waarden in als 'Ja' is geselecteerd voor sluitpot."); shouldSubmit = false; return; } } ////// CHECK BROWSER FORM VALIDATION /////// if (!form.checkValidity()) { form.reportValidity(); shouldSubmit = false; return; } ////// FADE OUT SCREEN ONLY IF ALL VALIDATIONS PASS /////// if (shouldSubmit) { setTimeout(() => { document.body.style.transition = "opacity 1s ease-in-out"; document.body.style.opacity = "0"; setTimeout(() => { document.body.style.display = "none"; }, 1020); }, 20); } }); } });

////////// EASY OUT ON SUBMIT /////////// document.addEventListener("DOMContentLoaded", function () { const submitButton = document.getElementById("SUBMITBUTTON"); if (submitButton) { submitButton.addEventListener("click", function (event) { // Check if shouldSubmit is false (blocked submission) if (typeof shouldSubmit !== "undefined" && !shouldSubmit) { return; // Do nothing if submission is blocked } setTimeout(() => { document.body.style.transition = "opacity 1s ease-in-out"; document.body.style.opacity = "0"; setTimeout(() => { document.body.style.display = "none"; }, 1020); }, 20); }); } });

BLOCK SUMBIT ON VUL IN

//////// BLOCK SUBMIT/ENTER ON VUL IN //////// // Global flag to indicate if submission should proceed let shouldSubmit = true; // Prevent form submission on Enter key press document.querySelector("form").addEventListener("keydown", function(event) { if (event.key === "Enter") { // Prevent default behavior of the Enter key event.preventDefault(); } }); // Existing validation logic document.getElementById("SUBMITBUTTON").addEventListener("click", function(event) { shouldSubmit = true; // Reset flag on each click // Get all dropdowns with names containing 'VVU' or 'VVI' const dropdowns = document.querySelectorAll("select[name*='VVU'], select[name*='VVI']"); for (let dropdown of dropdowns) { // Check if the dropdown is visible (does not have the 'cfef-hidden' class) const isHidden = dropdown.closest('.cfef-hidden'); if (!isHidden) { // If the value is 'vul in', prevent form submission if (dropdown.value === 'vul in') { event.preventDefault(); alert("Niet alle vakvullingen zijn ingevuld."); shouldSubmit = false; // Prevent further submission return; // Stop further validation } } } // Additional validation for sluitpot const sluitpotJa = document.querySelector("input[name='form_fields[sluitpot]'][value='ja']:checked"); if (sluitpotJa) { const xSluitpot = document.getElementById("form-field-X_sluitpot"); const ySluitpot = document.getElementById("form-field-Y_sluitpot"); if (!xSluitpot.value.trim() || !ySluitpot.value.trim()) { event.preventDefault(); alert("Vul de hartafstand waarden in als 'Ja' is geselecteerd voor sluitpot."); shouldSubmit = false; return; } } });

CHECK DEFAULT RADIO OPTIONS

DBP SIDINGBESTELFORMULIER

kg

Vragen of opmerkingen

DBP SIDING
BESTEL
FORMULIER