changes

resources/views/theme/spade/pages/hair-transplant/cluster.blade.php

@@ -166,9 +166,8 @@
                                         <div class="text-danger">{{ $message }}</div>
                                     @enderror
                                 </div>
-                                <div class="col-md-12">
-                                    <input class="form-control" type="text" name="contact_no" placeholder="Phone *"
-                                        required>
+                                <div class="col-md-12 appointment-form-field">
+                                    <input class="form-control phone-number" type="text" name="contact_no" placeholder="Phone *" required>
                                     @error('contact_no')
                                         <div class="text-danger">{{ $message }}</div>
                                     @enderror
@@ -233,3 +232,45 @@
     </div>
 
 @endsection
+
+
+@push('js')
+    <script>
+        $(document).ready(function () {
+            $("form[action='{{ route('consultat_with_us') }}']").on("submit", function (e) {
+                e.preventDefault();
+
+                var form = $(this);
+                var url = form.attr("action");
+
+                // Remove existing error messages
+                form.find(".text-danger").remove();
+
+                $.ajax({
+                    url: url,
+                    type: "POST",
+                    data: form.serialize(),
+                    success: function (response) {
+                        form[0].reset();
+                        window.location.href = "/thankyou"; // redirect after success
+                    },
+                    error: function (xhr) {
+                        if (xhr.status === 422) {
+                            var errors = xhr.responseJSON.errors;
+
+                            $.each(errors, function (key, value) {
+                                var field = form.find("[name='" + key + "']");
+                                var wrapper = field.closest(".col-md-12"); // keep errors inside column wrapper
+
+                                // Append the error message below the field
+                                wrapper.append('<div class="text-danger mt-1">' + value[0] + '</div>');
+                            });
+                        } else {
+                            alert("Something went wrong, please try again later.");
+                        }
+                    }
+                });
+            });
+        });
+    </script>
+@endpush