Added AJAX form submission handling

assets/js/main.js

@@ -0,0 +1,102 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const form = document.getElementById("assessment-form");
+    const submitButton = form.querySelector("button[type='submit']");
+
+    // Function to toggle "Other" text fields when checkboxes are selected
+    function toggleOtherField(checkbox, textFieldId) {
+        const textField = document.getElementById(textFieldId);
+        textField.style.display = checkbox.checked ? "block" : "none";
+    }
+
+    // Function to toggle dependent fields based on selection
+    function toggleDependentField(selectElement, valueToShow, dependentFieldId) {
+        const field = document.getElementById(dependentFieldId);
+        field.style.display = selectElement.value === valueToShow ? "block" : "none";
+    }
+
+    // Track form changes to prevent unnecessary submissions
+    let formChanged = false;
+
+    form.addEventListener("input", function () {
+        formChanged = true;
+        submitButton.disabled = false;
+    });
+
+        // Handle form submission via AJAX
+		form.addEventListener("submit", function (event) {
+			event.preventDefault();
+	
+			if (!formChanged) {
+				showMessage("danger", "No changes detected. Please update the form before submitting.");
+				return;
+			}
+	
+			submitButton.disabled = true;
+			showMessage("info", "Submitting...");
+	
+			const formData = new FormData(form);
+	
+			fetch("../submit.php", {
+				method: "POST",
+				body: formData
+			})
+			.then(response => response.json())
+			.then(data => {
+				if (data.success) {
+					showMessage("success", data.success);
+					formChanged = false;
+					submitButton.disabled = true;
+				} else {
+					showMessage("danger", data.error || "An error occurred.");
+					submitButton.disabled = false;
+				}
+			})
+			.catch(() => {
+				showMessage("danger", "Network error. Please try again.");
+				submitButton.disabled = false;
+			});
+		});
+	
+		// Function to show messages on the form
+		function showMessage(type, text) {
+			let messageBox = document.getElementById("form-message");
+			if (!messageBox) {
+				messageBox = document.createElement("div");
+				messageBox.id = "form-message";
+				messageBox.className = "alert mt-3 d-none";
+				form.appendChild(messageBox);
+			}
+			messageBox.innerHTML = text;
+			messageBox.classList.remove("alert-success", "alert-danger", "alert-info", "d-none");
+			messageBox.classList.add(type === "success" ? "alert-success" : "alert-danger");
+		}
+	
+
+    // Prepopulate the form if returning user
+    function prepopulateForm() {
+        const savedData = JSON.parse(localStorage.getItem("assessmentData"));
+        if (savedData) {
+            Object.keys(savedData).forEach(key => {
+                const field = form.elements[key];
+                if (field) {
+                    if (field.type === "checkbox") {
+                        field.checked = savedData[key];
+                    } else {
+                        field.value = savedData[key];
+                    }
+                }
+            });
+        }
+    }
+
+    // Save form data to localStorage on change
+    form.addEventListener("input", function () {
+        let formData = {};
+        new FormData(form).forEach((value, key) => {
+            formData[key] = value;
+        });
+        localStorage.setItem("assessmentData", JSON.stringify(formData));
+    });
+
+    prepopulateForm();
+});

forms/questionnaire.html

@@ -16,6 +16,7 @@
         <h3 class="text-center">CCAH IT Assessment Questionnaire</h3>
         
         <form id="assessment-form" action="../submit.php" method="POST">
+            <div id="form-message" class="alert d-none mt-3"></div>
             <!-- General Information -->
             <div class="mb-3">
                 <label class="form-label">Role/Title at CCAH</label>