https://www.deepal.com.pe/scripts/blog/newsletterBlog.js

1const newsletterForm = document.querySelector("#newsletter_form");
2const nameInput = document.querySelector("#Name");
3const lastNameInput = document.querySelector("#LastName");
4const emailInput = document.querySelector("#Email");
5const disclaimerCheckbox = document.querySelector("#Disclaimer");
6const submitButton = document.querySelector(
7  ".blog_home_newsletter__form__submit"
8);
9
10newsletterForm?.addEventListener("change", (e) => {
11  if (
12    nameInput &&
13    nameInput.value != "" &&
14    lastNameInput &&
15    lastNameInput.value != "" &&
16    emailInput &&
17    emailInput.value != ""
18  ) {
19    submitButton.removeAttribute("disabled");
20}else{
21    submitButton.setAttribute("disabled", true);
22  }
23});
24
25// newsletterForm?.addEventListener("submit", async (e) => {
26//   e.preventDefault();
27//   submitButton?.setAttribute("disabled", true);
28//   submitButton.innerText = "ENVIANDO...";
29//   disclaimerCheckbox.value = disclaimerCheckbox.checked;
30
31//   await grecaptcha.ready(async function () {
32//     const token = await grecaptcha.execute(publicKey, { action: "submit" });
33//     document.querySelector("#Captchatoken").value = token;
34//     newsletterForm.submit(e);
35//   });
36// });
37
38
39newsletterForm?.addEventListener("submit", async (event) => {
40  event.preventDefault(); // Avoid default sending
41
42  submitButton?.setAttribute("disabled", true);
43  disclaimerCheckbox.value = disclaimerCheckbox.checked;
44
45  await grecaptcha.ready(async function () {
46      const token = await grecaptcha.execute(publicKey, { action: "submit" });
47      document.querySelector("#Captchatoken").value = token;
48
49      let nombre = document.getElementById("Name").value.trim();
50      let apellidos = document.getElementById("LastName").value.trim();
51      let email = document.getElementById("Email").value.trim();
52
53      let nombreValido = /^[a-zA-Z\s]+$/.test(nombre);
54      let apellidosValidos = /^[a-zA-Z\s]+$/.test(apellidos);
55      let emailValido = /^[\w.-]+@[a-zA-Z\d.-]+\.[a-zA-Z]{2,}$/.test(email);
56
57      document.querySelectorAll('.error-message').forEach((e) => e.remove());
58
59      let formValid = true;
60
61      const showError = (inputId, message) => {
62          const inputElement = document.getElementById(inputId);
63          const errorElement = document.createElement("div");
64          errorElement.className = "error-message";
65          errorElement.innerText = message;
66          inputElement.parentNode.insertBefore(errorElement, inputElement.nextSibling);
67      };
68
69      if (!nombreValido) {
70          showError('Name', errorMessageName);
71          formValid = false;
72      }
73
74      if (!apellidosValidos) {
75          showError('LastName', errorMessageLastName);
76          formValid = false;
77      }
78
79      if (!emailValido) {
80          showError('Email', errorMessageEmail);
81          formValid = false;
82      }
83
84      if (!formValid) {
85          submitButton?.removeAttribute("disabled");
86          return;
87      }
88
89      //  Use FormData to respect enctype="multipart/form-data"
90      const formData = new FormData(newsletterForm);
91      formData.append("Captchatoken", token);
92
93      try {
94          const response = await fetch(newsletterForm.getAttribute("action"), {
95              method: "POST",
96              body: formData,
97          });
98
99          const fadeIn = (element) => {
100              element.classList.remove("fade-exit", "fade-exit-active");
101              element.style.display = "block";
102              element.classList.add("fade-enter");
103              requestAnimationFrame(() => {
104                  element.classList.add("fade-enter-active");
105              });
106          };
107
108          const fadeOut = (element) => {
109              element.classList.remove("fade-enter", "fade-enter-active");
110              element.classList.add("fade-exit");
111              requestAnimationFrame(() => {
112                  element.classList.add("fade-exit-active");
113              });
114              setTimeout(() => {
115                  element.style.display = "none";
116                  element.classList.remove("fade-exit", "fade-exit-active");
117              }, 500);
118          };
119
120          if (response.ok) {
121              fadeOut(document.getElementById("newsletter_container"));
122              fadeIn(document.getElementById("thankyou_page"));
123          } else {
124              fadeOut(document.getElementById("newsletter_container"));
125              fadeIn(document.getElementById("error_page"));
126          }
127
128          // Return to the form after 15 seconds
129          setTimeout(() => {
130              fadeOut(document.getElementById("thankyou_page"));
131              fadeOut(document.getElementById("error_page"));
132
133              setTimeout(() => {
134                  const formContainer = document.getElementById("newsletter_container");
135                  fadeIn(formContainer);
136
137                  // Clear the form and reset the checkbox
138                  newsletterForm.reset();
139                  submitButton.setAttribute("disabled", true);
140              }, 500);
141          }, 15000);
142
143      } catch (error) {
144          console.error("Error al enviar el formulario:", error);
145      }
146  });
147});