From fba45752d3569077d68c300f8439dfdcbb02851a Mon Sep 17 00:00:00 2001 From: Antoine Greuzard Date: Fri, 4 Aug 2023 09:26:12 +0200 Subject: [PATCH] Refactor form submission and error handling in modal-form-script.js Refactored AJAX form submission function in modal-form-script.js. Shifted from cloning the `messageDivParam` to direct assignment, improving readability. Added error handling for AJAX request and response processing. This improvement aids in debugging and clearer understanding of potential issues. Rebuilt related bundle 'frontEnd.bundled.js'. --- assets/js/modal-form-script.js | 38 ++++++++++++++++++++++------------ dist/frontEnd.bundled.js | 2 +- 2 files changed, 26 insertions(+), 14 deletions(-) diff --git a/assets/js/modal-form-script.js b/assets/js/modal-form-script.js index b40eb3b..d931356 100644 --- a/assets/js/modal-form-script.js +++ b/assets/js/modal-form-script.js @@ -3,17 +3,18 @@ import '../css/modal-form-style.scss' /* global grecaptcha, ajaxObject */ /** - * Submit form data using AJAX request. + * Sends a form submission via AJAX. * - * @param {HTMLElement} messageDivParam - The message div element. + * @param {Element} messageDivParam - The element to display the result message. * @param {HTMLFormElement} form - The form element to submit. - * @param {File} file - The file to attach to the form data. Optional. - * @param {string} recaptchaResponse - The reCAPTCHA response. Optional. + * @param {File} file - The file to be uploaded (optional). + * @param {string} recaptchaResponse - The response from reCAPTCHA (optional). */ const submitForm = (messageDivParam, form, file, recaptchaResponse) => { + let message + const messageDiv = messageDivParam const xhr = new XMLHttpRequest() const formData = new FormData(form) - const messageDiv = { ...messageDivParam } // Clone the object formData.append('action', 'send_email') if (recaptchaResponse) { @@ -27,20 +28,31 @@ const submitForm = (messageDivParam, form, file, recaptchaResponse) => { xhr.open('POST', ajaxObject.ajaxurl, true) - xhr.onload = function xhrOnload() { + xhr.onload = function xhrOnLoad() { if (xhr.status === 200) { - const response = JSON.parse(xhr.responseText) - if (response.data) { - messageDiv.textContent = response.data.message - form.reset() - } else { - messageDiv.textContent = response.data.message + try { + const response = JSON.parse(xhr.responseText) + if (response.data) { + message = response.data.message + form.reset() + } else { + message = 'An error occurred while processing the response' + } + } catch (error) { + message = 'An error occurred while parsing the response' } + messageDiv.textContent = message } else { - messageDiv.textContent = 'An error occurred with the AJAX request' + message = 'An error occurred with the AJAX request' + messageDiv.textContent = message } } + xhr.onerror = () => { + message = 'An error occurred while making the AJAX request' + messageDiv.textContent = message + } + xhr.send(formData) } diff --git a/dist/frontEnd.bundled.js b/dist/frontEnd.bundled.js index 8435f00..4528b70 100644 --- a/dist/frontEnd.bundled.js +++ b/dist/frontEnd.bundled.js @@ -1 +1 @@ -const i=(s,o,d,a)=>{const t=new XMLHttpRequest,e=new FormData(o);({...s},e.append("action","send_email")),a&&e.append("recaptcha_response",a),d&&(e.delete("brochure"),e.append("brochure",d)),t.open("POST",ajaxObject.ajaxurl,!0),t.onload=function(){if(t.status===200){const n=JSON.parse(t.responseText);n.data?(n.data.message,o.reset()):n.data.message}},t.send(e)};window.addEventListener("load",()=>{const s=document.querySelectorAll('a[href*="#brochure"]'),o=document.querySelector("#modal-form"),d=document.querySelector("#modal-form-close");let a;o&&getComputedStyle(o).display==="block"&&(document.body.style.overflow="hidden"),s&&o&&d&&(s.forEach(e=>{e.addEventListener("click",r=>{r.preventDefault();const n=e.getAttribute("href");if(n.includes("?")){const[c]=n.split("?");if(c){const[l,u]=c.split("=");l==="file"&&(a=u)}}o.style.display="block",document.body.style.overflow="hidden"})}),d.addEventListener("click",()=>{o.style.display="none",document.body.style.overflow="auto",document.body.style.overflowX="hidden"}),window.addEventListener("click",e=>{e.target===o&&(o.style.display="none",document.body.style.overflow="auto",document.body.style.overflowX="hidden")}),window.addEventListener("keydown",e=>{e.key==="Escape"&&(o.style.display="none",document.body.style.overflow="auto",document.body.style.overflowX="hidden")}));const t=document.querySelector("#modal-form form");t&&t.addEventListener("submit",e=>{e.preventDefault();const r=t.querySelector('input[name="recaptchaSiteKey"]'),n=t.querySelector(".influactive-form-message");if(r&&grecaptcha){const c=r.value;grecaptcha.ready(()=>{grecaptcha.execute(c,{action:"submit"}).then(l=>{i(n,t,a,l),setTimeout(()=>{n.textContent=""},5e3)})})}else i(n,t,a,null),setTimeout(()=>{n.textContent=""},5e3)})}); +const i=(l,r,d,c)=>{let e;const o=l,n=new XMLHttpRequest,t=new FormData(r);t.append("action","send_email"),c&&t.append("recaptcha_response",c),d&&(t.delete("brochure"),t.append("brochure",d)),n.open("POST",ajaxObject.ajaxurl,!0),n.onload=function(){if(n.status===200){try{const s=JSON.parse(n.responseText);s.data?(e=s.data.message,r.reset()):e="An error occurred while processing the response"}catch{e="An error occurred while parsing the response"}o.textContent=e}else e="An error occurred with the AJAX request",o.textContent=e},n.onerror=()=>{e="An error occurred while making the AJAX request",o.textContent=e},n.send(t)};window.addEventListener("load",()=>{const l=document.querySelectorAll('a[href*="#brochure"]'),r=document.querySelector("#modal-form"),d=document.querySelector("#modal-form-close");let c;r&&getComputedStyle(r).display==="block"&&(document.body.style.overflow="hidden"),l&&r&&d&&(l.forEach(o=>{o.addEventListener("click",n=>{n.preventDefault();const t=o.getAttribute("href");if(t.includes("?")){const[a]=t.split("?");if(a){const[s,u]=a.split("=");s==="file"&&(c=u)}}r.style.display="block",document.body.style.overflow="hidden"})}),d.addEventListener("click",()=>{r.style.display="none",document.body.style.overflow="auto",document.body.style.overflowX="hidden"}),window.addEventListener("click",o=>{o.target===r&&(r.style.display="none",document.body.style.overflow="auto",document.body.style.overflowX="hidden")}),window.addEventListener("keydown",o=>{o.key==="Escape"&&(r.style.display="none",document.body.style.overflow="auto",document.body.style.overflowX="hidden")}));const e=document.querySelector("#modal-form form");e&&e.addEventListener("submit",o=>{o.preventDefault();const n=e.querySelector('input[name="recaptchaSiteKey"]'),t=e.querySelector(".influactive-form-message");if(n&&grecaptcha){const a=n.value;grecaptcha.ready(()=>{grecaptcha.execute(a,{action:"submit"}).then(s=>{i(t,e,c,s),setTimeout(()=>{t.textContent=""},5e3)})})}else i(t,e,c,null),setTimeout(()=>{t.textContent=""},5e3)})});