https://corporate.lundsandbyerlys.com/wp-content/themes/lunds-and-byerlys-theme/includes/js/newsletter.js

1// Newsletter Block
2document.addEventListener('DOMContentLoaded', function () {
3  var activateButton = document.querySelector(
4    '.newsletter__activate-form .button-arrow'
5  );
6  var formContent = document.querySelector('.accordion-content');
7  var firstNameInput = document.getElementById('firstName');
8  var lastNameInput = document.getElementById('lastName');
9  var listsInput = document.getElementById('news_signup_lists');
10
11  // Hide form content initially
12  formContent.style.display = 'none';
13
14  // Toggle form content when "Subscribe" button is clicked
15  activateButton.addEventListener('click', function (event) {
16    event.preventDefault(); // Prevent default anchor behavior
17
18    // Remove the "Subscribe" button
19    activateButton.closest('.newsletter__activate-form').remove();
20
21    // Toggle visibility of form content
22    if (formContent.style.display === 'none') {
23      formContent.style.display = 'block';
24    } else {
25      formContent.style.display = 'none';
26    }
27  });
28
29  var form = document.getElementById('newsletter__form');
30  form.addEventListener('submit', function (event) {
31    event.preventDefault(); // Prevent default form submission
32
33    var emailInput = form.querySelector('.newsletter__email');
34    var emailValue = emailInput.value.trim();
35
36    // Client-side email validation
37    if (!isValidEmail(emailValue)) {
38      // Show alert for invalid email
39      alert('Please enter a valid email address.');
40      return;
41    }
42
43    var firstNameValue = firstNameInput.value.trim();
44    var lastNameValue = lastNameInput.value.trim();
45    var listsValue = listsInput.value.trim();
46
47    var formData = new FormData(form); // Get form data
48    formData.append('Email', emailValue); // Add email value to form data
49    formData.append('firstName', firstNameValue); // Add first name value to form data
50    formData.append('lastName', lastNameValue); // Add last name value to form data
51    formData.append('lists', listsValue); // Add last name value to form data
52
53    var recaptchaResponse = grecaptcha.getResponse();
54    formData.append('g-recaptcha-response', recaptchaResponse);
55
56    var xhr = new XMLHttpRequest(); // Create XMLHttpRequest object
57    var url = newsletter_ajax_object.ajax_url;
58
59    xhr.open('POST', url, true); // Set up the request
60    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
61
62    xhr.onload = function () {
63      if (xhr.status >= 200 && xhr.status < 400) {
64        // Success status code
65        try {
66          var response = JSON.parse(xhr.responseText);
67          if (response.success) {
68            // Hide the form and reCaptcha
69            form.style.display = 'none';
70            var footerRecaptcha = document.querySelector('.footer__recaptcha');
71            if (footerRecaptcha) {
72              footerRecaptcha.style.display = 'none';
73            }
74            // Create and append a thank you message
75            var thankYouMessage = document.createElement('p');
76            thankYouMessage.textContent = 'Thank you for subscribing!';
77            form.parentNode.appendChild(thankYouMessage);
78          } else {
79            // Handle errors (display error message)
80            alert(response.error || 'An error occurred.');
81          }
82        } catch (error) {
83          console.error('Error parsing JSON:', error);
84          alert('An error occurred. Please try again later.');
85        }
86      } else {
87        // Error status code
88        console.error('Request failed with status:', xhr.status);
89        alert('An error occurred. Please try again later.');
90      }
91    };
92
93    xhr.onerror = function () {
94      // Handle network errors
95      console.error('Request failed');
96      alert('An error occurred. Please try again later.');
97    };
98
99    xhr.send(new URLSearchParams(formData)); // Send the request with form data
100  });
101
102  // Function to validate email format
103  function isValidEmail(email) {
104    var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
105    return emailRegex.test(email);
106  }
107});