103 lines
3.3 KiB
JavaScript
103 lines
3.3 KiB
JavaScript
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();
|
|
});
|