Merge pull request #2897 from codeeu/dev

Dev

Author: bernardhanna

resources/views/static/contact-us.blade.php

@@ -174,9 +174,9 @@ class="w-8 h-8 bg-white rounded-lg border-2 border-blue-800 text-primary focus:r
                         </span>
                     </label>
 
-                    <!-- CAPTCHA -->
-                    <div class="flex justify-center mt-6">
+                      <div class="flex justify-center mt-6">
                         <div class="cf-turnstile" data-sitekey="{{ env('TURNSTILE_SITEKEY') }}"></div>
+                        <input type="hidden" id="cf-turnstile-response" name="cf-turnstile-response" />
                     </div>
 
                     <!-- Submit -->
@@ -190,48 +190,51 @@ class="flex gap-2 items-center px-8 py-4 text-base font-semibold leading-7 text-
             </div>
         </div>
 
-<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?onload=turnstileCallback" async defer></script>
- <script>
-            document.addEventListener('DOMContentLoaded', function() {
-                const form = document.getElementById('contactForm');
-                const submitButton = document.getElementById('submitButton');
-                const requiredFields = form.querySelectorAll('[required]');
-
-                function validateForm() {
-                    let allFilled = true;
-                    requiredFields.forEach(field => {
-                        if ((field.type === 'checkbox' && !field.checked) ||
-                            (field.tagName === 'SELECT' && !field.value) ||
-                            ((field.tagName === 'INPUT' || field.tagName === 'TEXTAREA') && !field.value.trim())) {
-                            allFilled = false;
-                        }
-                    });
-
-                    submitButton.disabled = !allFilled;
-                    submitButton.classList.toggle('bg-primary', allFilled);
-                    submitButton.classList.toggle('hover:bg-hover-orange', allFilled);
-                    submitButton.classList.toggle('cursor-pointer', allFilled);
-                    submitButton.classList.toggle('cursor-not-allowed', !allFilled);
-                    submitButton.classList.toggle('bg-gray-300', !allFilled);
-                    submitButton.classList.toggle('text-gray-500', !allFilled);
-                    submitButton.classList.toggle('text-black', allFilled);
+<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        const form = document.getElementById('contactForm');
+        const submitButton = document.getElementById('submitButton');
+        const requiredFields = form.querySelectorAll('[required]');
+        const captchaInput = document.getElementById('cf-turnstile-response');
+
+        function validateForm() {
+            let allValid = true;
+            requiredFields.forEach(field => {
+                if ((field.type === 'checkbox' && !field.checked) ||
+                    (field.tagName === 'SELECT' && !field.value) ||
+                    ((field.tagName === 'INPUT' || field.tagName === 'TEXTAREA') && !field.value.trim())) {
+                    allValid = false;
                 }
-
-                form.addEventListener('input', validateForm);
-                form.addEventListener('change', validateForm);
-                validateForm();
             });
-window.onload = function () {
+
+            allValid = allValid && captchaInput.value;
+
+            submitButton.disabled = !allValid;
+            submitButton.classList.toggle('bg-primary', allValid);
+            submitButton.classList.toggle('hover:bg-hover-orange', allValid);
+            submitButton.classList.toggle('cursor-pointer', allValid);
+            submitButton.classList.toggle('cursor-not-allowed', !allValid);
+            submitButton.classList.toggle('bg-gray-300', !allValid);
+            submitButton.classList.toggle('text-gray-500', !allValid);
+            submitButton.classList.toggle('text-black', allValid);
+        }
+
+        form.addEventListener('input', validateForm);
+        form.addEventListener('change', validateForm);
+
         window.turnstileCallback = function () {
             turnstile.render('.cf-turnstile', {
                 sitekey: '{{ env('TURNSTILE_SITEKEY') }}',
-                callback: function(token) {
-                    document.getElementById('cf-turnstile-response').value = token;
+                callback: function (token) {
+                    captchaInput.value = token;
+                    validateForm();
                 }
             });
         };
-    };
-        </script>
+    });
+</script>
         </div>
     </section>
     </section>