modified form

maa17019 · Mar 22, 2021 · 335291c · 335291c
1 parent db2f487
commit 335291c
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 10 deletions.
diff --git a/week-9/working-web-form/index.html b/week-9/working-web-form/index.html
@@ -9,29 +9,32 @@
 </head>
 <body>
 
-    <form>
-        <h1>Web form that works</h1>
+    <form action="https://formspree.io/f/mdoynapr" method="POST">
+
+        <h1>Web form that works!</h1>
         <h4>*Fill in all fields</h2>
             <p>
               <label for="name"><span>Name:* </span></label> <!--Name-->
-              <input type="text" id="name" name="username">
+              <input type="text" id="name" name="Name">
             </p>
             <p>
-              <label for="mail"><span>E-mail:* </span></label> <!--Email-->
-              <input type="email" id="mail" name="usermail">
+              <label for="mail"><span>Email:* </span></label> <!--Email-->
+              <input type="email" id="mail" name="Email">
             </p>
             <p>
               <label for="subject"><span>Subject:* </span></label> <!--Subject-->
-              <input type="text" id="subject" name="subject">
+              <input type="text" id="subject" name="Subject">
             </p>
             <p>
               <label for="message"><span>Message:* </span></label> <!--Message-->
-              <input type="text" id="message" name="message">
+              <input type="text" id="message" name="Message">
             </p>
 
             <strong><p id= "warning"></p></strong> <!--Warning to fill in all fields-->
 
-            <button type="submit">Submit</button>
+            <button id="my-form-button" type="submit">Submit</button>
+            <p id="my-form-status"></p>
+
     </form>
 
     <script src="js/main.js"></script>

diff --git a/week-9/working-web-form/js/main.js b/week-9/working-web-form/js/main.js
@@ -1,4 +1,4 @@
-let form = document.querySelector("form");
+let forms = document.querySelector("form");
 let namee = document.getElementById("name");
 let mail = document.getElementById("mail");
 let subject = document.getElementById("subject");
@@ -13,7 +13,7 @@ let warning = document.querySelector("#warning");
   message.value === ""
 ];*/
 
-form.addEventListener("submit", function (event) {
+forms.addEventListener("submit", function (event) {
   if ((namee.value === "" || mail.value === "") && (subject.value === "" || message.value === "")){
     event.preventDefault();
     warning.innerHTML = "You must fill in ALL fields!" ;
@@ -46,3 +46,23 @@ else if (namee.value === "") {
 });
 
 /*Adding FormSpree API*/
+let form = document.getElementById("my-form");
+
+    async function handleSubmit(event) {
+      event.preventDefault();
+      let status = document.getElementById("my-form-status");
+      let data = new FormData(event.target);
+      fetch(event.target.action, {
+        method: form.method,
+        body: data,
+        headers: {
+            'Accept': 'application/json'
+        }
+      }).then(response => {
+        status.innerHTML = "Thanks for your submission!";
+        form.reset()
+      }).catch(error => {
+        status.innerHTML = "Oops! There was a problem submitting your form"
+      });
+    }
+    form.addEventListener("submit", handleSubmit)