Handle form without redirect

2026-05-02 02:10:27 +00:00 · 2023-11-08 19:07:54 +01:00
parent 770beea258
commit 892ddca71a
3 changed files with 56 additions and 10 deletions
@@ -1,4 +1,32 @@
-document.querySelector('form').addEventListener('submit', (event) => {
+const form = document.querySelector('form');
+const submissionStatus = form.querySelector('#submission-status');
+
+form.addEventListener('submit', (event) => {
  event.preventDefault();
-  console.log(new FormData(event.target));
+
+  fetch(event.target.action, {
+    method: event.target.method,
+    body: new FormData(event.target),
+    headers: {
+      Accept: 'application/json',
+    },
+  })
+    .then((response) => {
+      if (response.ok) {
+        submissionStatus.innerHTML = 'Message sent successfully!';
+        submissionStatus.style.display = 'block';
+        form.reset();
+      }
+    })
+    .catch((error) => {
+      submissionStatus.innerHTML = 'Error sending message!';
+      submissionStatus.style.display = 'block';
+      console.error(error);
+    })
+    .finally(() => {
+      setTimeout(() => {
+        submissionStatus.innerHTML = '';
+        submissionStatus.style.display = 'none';
+      }, 5000);
+    });
 });