https://www.octobergallery.co.uk/contact/contact.js

1$(function () {
2    // ReCaptcha Callbacks
3    window.verifyRecaptchaCallback = function (response) {
4        $('input[data-recaptcha]').val(response).trigger('change');
5    };
6
7    window.expiredRecaptchaCallback = function () {
8        $('input[data-recaptcha]').val("").trigger('change');
9    };
10
11    // Form validation using the validator plugin
12    $('#contact-form').validator();
13
14    // Form submission handling
15    $('#contact-form').on('submit', function (e) {
16        if (!e.isDefaultPrevented()) {
17            var url = "contact.php"; // PHP script to handle the form submission
18
19            // AJAX POST request
20            $.ajax({
21                type: "POST",
22                url: url,
23                data: $(this).serialize(),
24                success: function (response) {
25                    // Debugging: Log response to the console
26                    console.log("Response:", response);
27
28                    var messageAlert = 'alert-' + response.type;
29                    var messageText = response.message;
30
31                    var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable">' +
32                        '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' +
33                        messageText +
34                        '</div>';
35
36                    // Display message in the form
37                    $('#contact-form').find('.messages').html(alertBox);
38
39                    if (response.type === 'success') {
40                        $('#contact-form')[0].reset(); // Reset the form on success
41                        grecaptcha.reset(); // Reset ReCaptcha
42                    }
43                },
44                error: function (xhr, status, error) {
45                    // Debugging: Log errors to the console
46                    console.error("AJAX Error:", status, error);
47                    console.log("XHR Response:", xhr.responseText);
48
49                    var errorAlert = '<div class="alert alert-danger alert-dismissable">' +
50                        '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' +
51                        'There was an error submitting the form. Please try again later.' +
52                        '</div>';
53                    $('#contact-form').find('.messages').html(errorAlert);
54                }
55            });
56            return false; // Prevent default form submission
57        }
58    });
59});