Rewrote form subscription JavaScript

_includes/head.html

@@ -9,7 +9,6 @@
   <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">
 
-  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="{{ "/assets/js/subscribe-form.js" | relative_url }}"></script>
 
   {% feed_meta %}

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");
+// 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);

index.html

@@ -8,8 +8,7 @@ <h1>
     </h1>
     <h2>Consciousness expansion and knowledge exchange</h2>
     <p>Unique Wellbeing Retreat 1 hour from Sydney</p>
-<!--    <form action="https://docs.google.com/forms/d/e/1FAIpQLSdEaO77pe82ODjfueHMyCukm7RbAztPis2p0jdRxtLu_gkA_g/formResponse" method="post">-->
-    <form action="" method="post">
+    <form action="https://docs.google.com/forms/d/e/1FAIpQLSdEaO77pe82ODjfueHMyCukm7RbAztPis2p0jdRxtLu_gkA_g/formResponse" method="post">
             <label for="subscribe-email">Get notified about the next event:</label>
         <input type="email" id="subscribe-email" placeholder="Enter your email address" name="entry.972856848" aria-describedby="contact-email-error">
         <p id="subscribe-email-error" class="help-block"></p>