Add jQuery and update contact form submission

Author: Web-Jose

404.html

@@ -43,6 +43,8 @@
 
       gtag("config", "G-CSN8G33F57");
     </script>
+    <!-- jQuery -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   </head>
 
   <!-- Header -->
@@ -88,7 +90,12 @@
         <footer>
           <section class="contactform">
             <h1 class="Title">Get In Touch</h1>
-            <form action="" method="post" name="contact-form">
+            <form
+              action="/contact.php"
+              method="post"
+              name="contact-form"
+              id="contact-form"
+            >
               <label for="name">Name:</label><br />
               <input
                 type="text"

contact.php

@@ -1,5 +1,4 @@
 <?php
-if (isset($_POST["submit"])) {
   // Only process POST requests
   if ($_SERVER["REQUEST_METHOD"] == "POST") {
     // Get form field values and sanitize them
@@ -46,5 +45,4 @@
   } else {
     // Not a POST request
     echo "Access Denied. You must use POST method to send data.";
-  }
-}
+  }

index.html

@@ -14,11 +14,6 @@
     <link rel="stylesheet" type="text/css" href="portfolio.css" />
     <script src="portfolio.js" defer></script>
     <!-- Fonts and Icons -->
-    <link
-      rel="stylesheet"
-      href="https://s.pageclip.co/v1/pageclip.css"
-      media="screen"
-    />
     <link
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
@@ -47,6 +42,8 @@
 
       gtag("config", "G-CSN8G33F57");
     </script>
+    <!-- jQuery -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   </head>
 
   <!-- Header -->
@@ -612,7 +609,12 @@ <h1 class="Title" id="AltTitle">Projects</h1>
         <footer>
           <section class="contactform">
             <h1 class="Title">Get In Touch</h1>
-            <form action="" method="post" name="contact-form">
+            <form
+              action="/contact.php"
+              method="post"
+              name="contact-form"
+              id="contact-form"
+            >
               <label for="name">Name:</label><br />
               <input
                 type="text"

portfolio.js

@@ -1,3 +1,4 @@
+// Make courses expandable
 const courses = document.querySelectorAll(".Courses");
 
 courses.forEach((course) => {
@@ -12,6 +13,7 @@ courses.forEach((course) => {
   });
 });
 
+// Cards for projects
 const cardContainer = document.querySelector(".CardContainer");
 
 // Fetch the JSON data
@@ -50,7 +52,7 @@ fetch("projects.json")
     });
   });
 
-// Get all the navigation links
+// Make the navigation links active when the corresponding section is in the viewport
 const navLinks = document.querySelectorAll("nav a");
 
 // Add a scroll event listener to the window
@@ -104,6 +106,7 @@ cards.forEach((card) => {
   }px`;
 });
 
+// Search functionality for projects
 const searchInput = document.getElementById("searchInput");
 let debounceTimeout;
 
@@ -171,6 +174,7 @@ function displayCards(data) {
   }
 }
 
+// Skill search functionality
 const svgElements = document.querySelectorAll(".SkillCon");
 
 svgElements.forEach((svg) => {
@@ -182,6 +186,7 @@ svgElements.forEach((svg) => {
   });
 });
 
+// Function to trigger the search
 function triggerSearch(searchString) {
   // Fetch and filter data
   fetch("projects.json")
@@ -199,3 +204,33 @@ function triggerSearch(searchString) {
       displayCards(filteredData);
     });
 }
+
+// Contact form submission
+$(document).ready(function () {
+  // When the form is submitted
+  $("#contact-form").on("submit", function (e) {
+    // Prevent the default form submission
+    e.preventDefault();
+
+    // Serialize the form data
+    var formData = $(this).serialize();
+
+    // Send the form data to the server with AJAX
+    $.ajax({
+      type: "POST",
+      url: "/contact.php",
+      data: formData,
+      success: function (response) {
+        // Handle success (display success message, clear the form, etc.)
+        alert(response);
+        $("#contact-form").trigger("reset");
+      },
+      error: function () {
+        // Handle error (display error message, etc.)
+        alert(
+          "There was an error sending your message. Please try again later."
+        );
+      },
+    });
+  });
+});