From 708582f7780ac2ac3fadd112558d282252f179a4 Mon Sep 17 00:00:00 2001
From: Alok <i@alokprateek.in>
Date: Fri, 9 Aug 2024 16:20:37 +0530
Subject: [PATCH] Add form async scripts and div show/hide

---
 src/components/custom/LeadForm.astro       | 21 +++++++++----
 src/components/custom/NewsletterForm.astro | 34 +++++++++++++++++++++-
 2 files changed, 49 insertions(+), 6 deletions(-)

diff --git a/src/components/custom/LeadForm.astro b/src/components/custom/LeadForm.astro
index c8addf57..eae16b30 100644
--- a/src/components/custom/LeadForm.astro
+++ b/src/components/custom/LeadForm.astro
@@ -1,8 +1,11 @@
 ---
-let username = "user2s";
 
 ---
-
+<style>
+  .notice{
+    display: none;
+  }
+</style>
 <form
   id="contact-form"
   name="contact-form"
@@ -12,6 +15,7 @@ let username = "user2s";
   method="post"
   action="/api/leadform"
 >
+<div class="custom-block formblock">
   <div class="form-group">
     <label id="name-label" for="usrname">
       Name
@@ -71,14 +75,15 @@ let username = "user2s";
     <button id="saveForm" name="saveForm" class="btn submit" type="submit">
       Send message
     </button>
+    <div class="error"></div>
   </div>
-
+</div>
 
 
   <div class="custom-block notice">
     <div class="custom-block-heading">Message successfully sent!</div>
     <div class="custom-block-body">
-      <p>Hey {username}!</p>
+      <p>Hey!</p>
       <p>
         I have received your message, so keep an eye out on your mailbox to see
         if you have a reply. I'll try my best to get back to you within a day.
@@ -100,6 +105,8 @@ let username = "user2s";
     const form = event.target;
     const formData = new FormData(form);
     const errorDiv = document.querySelector('.error');
+    const formDiv = document.querySelector('.formblock');
+    const noticeDiv = document.querySelector('.notice');
 
     try {
       const response = await fetch(form.action, {
@@ -109,8 +116,12 @@ let username = "user2s";
 
       if (response.ok) {
         const result = await response.json();
+        console.log(result);
+
         errorDiv.textContent = 'Message sent successfully!';
-        errorDiv.style.color = 'green';
+        formDiv.style.display = 'none';
+        noticeDiv.style.display = 'block';
+
       } else {
         const error = await response.json();
         errorDiv.textContent = `Error: ${error.message}`;
diff --git a/src/components/custom/NewsletterForm.astro b/src/components/custom/NewsletterForm.astro
index 794250b1..d0ae609a 100644
--- a/src/components/custom/NewsletterForm.astro
+++ b/src/components/custom/NewsletterForm.astro
@@ -45,7 +45,39 @@
     </div>
 
     <div class="custom-block-body">
-      You have successfully registered for my newsletter!
+      
     </div>
   </form>
 </div>
+
+<script is:inline>
+  document.getElementById('newsletter-form').addEventListener('submit', async function(event) {
+    event.preventDefault(); // Prevent the default form submission
+
+    const form = event.target;
+    const formData = new FormData(form);
+    const errorDiv = document.querySelector('.custom-block-body');
+    const formDiv = document.querySelector('.form-group');
+    try {
+      const response = await fetch(form.action, {
+        method: form.method,
+        body: formData
+      });
+
+      if (response.ok) {
+        const result = await response.json();
+        console.log(result);
+        formDiv.style.display = 'none';
+        errorDiv.textContent = 'You have successfully registered for my newsletter!';
+
+      } else {
+        const error = await response.json();
+        errorDiv.textContent = `Error: ${error.message}`;
+        errorDiv.style.color = 'red';
+      }
+    } catch (error) {
+      errorDiv.textContent = `Error: ${error.message}`;
+      errorDiv.style.color = 'red';
+    }
+  });
+</script>
\ No newline at end of file