From 5b67636e45f775af31993cf2f5c4127ba5f8f485 Mon Sep 17 00:00:00 2001
From: Daniel Tam <daniel@danieltam.net>
Date: Sat, 15 May 2021 15:53:38 -0500
Subject: [PATCH] form ajax set up correctly, still pending

---
 index.html | 38 ++++++++++++++------------------------
 1 file changed, 14 insertions(+), 24 deletions(-)

diff --git a/index.html b/index.html
index b2d3cab..6926c4f 100644
--- a/index.html
+++ b/index.html
@@ -285,17 +285,17 @@
             <div class="h6"><i class="fa fa-envelope pe-2 text-muted" style="width:24px;opacity:0.85;"></i> daniel@danieltam.net</div>
           </div>
           <div class="mt-5 d-print-none">
-            <form onsubmit='sendMessage();'>
+            <form action="" method="post" id="msgForm">
               <div class="form-outline mb-4">
-                <input type="text" id="name" class="form-control" disabled required/>
+                <input type="text" id="name" class="form-control" name="name" disabled required/>
                 <label class="form-label" for="name">Name</label>
               </div>
               <div class="form-outline mb-4">
-                <input type="email" id="email" class="form-control" disabled required/>
+                <input type="email" id="email" class="form-control" name="email" disabled required/>
                 <label class="form-label" for="email">Email address</label>
               </div>
               <div class="form-outline mb-4">
-                <textarea class="form-control" style="resize: none;" id="message" rows="4" disabled required></textarea>
+                <textarea class="form-control" style="resize: none;" id="message" rows="4" name="message" disabled required></textarea>
                 <label class="form-label" for="message">Message</label>
               </div>
               <button class="btn btn-info btn-block mb-4" disabled>Send</button>
@@ -340,31 +340,21 @@
     <script src="scripts/aos.js?ver=1.2.1"></script>
     <script src="scripts/main.js?ver=1.2.1"></script>
     <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
-    <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script language="javascript">
-      // 
-      
+      $("#msgForm").submit(function(e) {
+        e.preventDefault();
 
-      function sendMessage() {
-        // get form data
-        let formData = {
-          name: $('#name').val(),
-          email: $('#email').val(),
-          message: $('#message').val(),
-        };
+        var form = $(this);
+        var url = form.attr('action');
 
-        // send data from the form
         $.ajax({
-          type: 'POST',
-          url : '/message',
-          data: formData,
-          dataType: "json",
-          encode: true,
-          success: sendSuccess(),
-          error: swal("Error", "There has been an error submitting your form. Please try again.", "error"),
+          type: "POST",
+          url: url,
+          data: form.serialize(),
+          success: sendSuccess()
         });
-
-      }
+      });
 
       function sendSuccess() {
         $('#name').val('');