diff --git a/_includes/head.html b/_includes/head.html index a70a92b..6d12584 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -9,7 +9,6 @@ - {% feed_meta %} diff --git a/assets/js/subscribe-form.js b/assets/js/subscribe-form.js index 6f41910..4922580 100644 --- a/assets/js/subscribe-form.js +++ b/assets/js/subscribe-form.js @@ -1,28 +1,56 @@ -console.log("subscribe-form.js running"); -$( document ).ready($('#subscribe-form-submit').click(function(e) { - console.log("javascript ssubscribe-form submit clicked"); - e.preventDefault(); - var subscribeEmail = $('#subscribe-email').val(); - // data validation code here - var url = "//docs.google.com/forms/d/e/1FAIpQLSdEaO77pe82ODjfueHMyCukm7RbAztPis2p0jdRxtLu_gkA_g/formResponse"; - var data = { - 'entry.972856848': subscribeEmail, - }; - $.ajax({ - type: "POST", - url: url, - dataType: "json", - data: data, - statusCode: { - 0: function() { - console.log("unknown"); - window.location.href = "subscribe_confirm.html"; - }, - 200: function() { - console.log("success"); - window.location.href = "subscribe_confirm.html"; - } - } - }); -})); -console.log("subscribe-form.js parsed"); \ No newline at end of file +// TODO: consider adding form validation in the submit listener + +if (!(window.fetch)) { + console.log('`fetch` is not available in this browser.'); +} + +async function postForm(form) { + // send the request, throws an error if could not send the request (eg if the action/url was invalid) + const response = await fetch(form.action, { + method: 'POST', + mode: 'no-cors', + cache: 'no-cache', + body: new FormData(form) + }); + + // if the server responded with anything other than success + if (!response.ok) { + const errorMessage = await response.text(); + throw new Error(errorMessage); + } + + return response.json(); // `json` will give us a usable object +} + +function disableForm(form, disabled) { + form.querySelectorAll('input, select, button, textarea').forEach(element => { + element.disabled = disabled; + }); +} + +window.addEventListener('submit', async function(submitEvent) { + // prevent the forms default action + submitEvent.preventDefault(); + + // disable all form child input elements + disableForm(submitEvent.target, true); + + // alternatively if you just want to disable the button: + //let submitButton = submitEvent.submitter; + //submitButton.disabled = true; + + // submit the form data + try { + let responseData = await postForm(submitEvent.target); + console.log(responseData); + //window.location = 'subscribe_confirm.html'; + } catch (error) { + //console.log(error); // some browsers will already log the error in the console + + // enable the form again + disableForm(submitEvent.target, false); + + // alternatively just the submit button + //submitButton.disabled = false; + } +}, false); diff --git a/index.html b/index.html index 4c54d9e..a22fb34 100644 --- a/index.html +++ b/index.html @@ -8,8 +8,7 @@
Unique Wellbeing Retreat 1 hour from Sydney
- -