changes

resources/views/theme/spade/index.blade.php

@@ -267,7 +267,7 @@
             <div class="flex justify-content-center">
                 <div class="w-70; mx-auto">
                     <p>Have any questions? Leave us your contact information, and we’ll reach out to you.</p>
-                    <form action="{{ route('contactUsMessage') }}" method="post">
+                    <form id="contactForm" action="{{ route('contactUsMessage') }}" method="post">
                         @csrf
                         <div class="row g-3">
                             <div class="col-md-6 mb-10">
@@ -296,8 +296,7 @@
                             </div>
                             <div class="col-md-6 mb-10">
                                 <label for="phone-number" class="form-label">Contact Number</label>
-                                <input type="text" class="form-control" id="phone-number" name="phone"
-                                    placeholder="98XXXXXXXX">
+                                <input type="tel" class="form-control  phone-number" id="phone-number" name="phone" placeholder="98XXXXXXXX">
                                 @error('phone')
                                     <div class="text-danger">{{ $message }}</div>
                                 @enderror
@@ -326,3 +325,50 @@
     </section>
 
 @endsection
+
+@push('js')
+<script>
+$(document).ready(function () {
+    $("#contactForm").on("submit", function (e) {
+        e.preventDefault();
+
+        var form = $(this);
+        var url = form.attr("action");
+
+        // Remove any existing errors
+        form.find(".text-danger").remove();
+
+        $.ajax({
+            url: url,
+            type: "POST",
+            data: form.serialize(),
+            success: function (response) {
+                // Clear the form
+                form[0].reset();
+
+                // Redirect to thank you page
+                window.location.href = "/thankyou";
+            },
+            error: function (xhr) {
+                if (xhr.status === 422) {
+                    var errors = xhr.responseJSON.errors;
+
+                    $.each(errors, function (key, value) {
+                        var field = $("[name='" + key + "']");
+                        var wrapper = field.closest(".mb-10"); // Bootstrap column wrapper
+                        
+                        // Remove old errors
+                        wrapper.find(".text-danger").remove();
+
+                        // Append new error under the field
+                        wrapper.append('<div class="text-danger mt-1">' + value[0] + '</div>');
+                    });
+                } else {
+                    alert("Something went wrong, please try again later.");
+                }
+            }
+        });
+    });
+});
+</script>
+@endpush