changes of ui in dropwon select opptions and bottun colours add

static/js/year_dropdown.js

@@ -1,36 +1,41 @@
 document.addEventListener("DOMContentLoaded", function () {
   const yearDropdown = document.getElementById("year");
   const errorDiv = document.getElementById("yearError");
+  const form = document.querySelector("form");
 
-  // Get the form dynamically
-  const form = document.querySelector("form"); // get from id as table name
-
-  // Dynamic table name = form id
-  const tableName = form.id.toLowerCase();
+  const tableName = form.id.toLowerCase(); // ao, cit, etc.
 
   const currentYear = new Date().getFullYear();
   const startYear = 1990;
 
-  // Fill Year dropdown
+  /* ---------- Fill Year Dropdown ---------- */
   for (let y = currentYear; y >= startYear; y--) {
     let nextYear = y + 1;
 
     let option = document.createElement("option");
-    option.value = y;
+    option.value = y;                       // IMPORTANT
     option.textContent = `AY ${y}-${nextYear}`;
 
     yearDropdown.appendChild(option);
   }
 
-  // Validate selected year
+  /* ---------- Validate on Change ---------- */
   yearDropdown.addEventListener("change", function () {
-    let selectedYear = parseInt(this.value);
+    const selectedYear = this.value;
+
+    // If empty → block submit
+    if (!selectedYear) {
+      errorDiv.style.display = "block";
+      errorDiv.innerText = "Please select an Assessment Year.";
+      form.onsubmit = () => false;
+      return;
+    }
 
     fetch("/check_year", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({
-        table: tableName,  // dynamic table name
+        table: tableName,
         year: selectedYear
       })
     })
@@ -38,15 +43,27 @@ document.addEventListener("DOMContentLoaded", function () {
       .then(data => {
         if (data.exists) {
           errorDiv.style.display = "block";
-          errorDiv.innerText = `Year ${selectedYear}-${selectedYear + 1} already exists!`;
-
-          // Block submission
-          form.onsubmit = function () { return false; };
+          errorDiv.innerText = `AY ${selectedYear}-${parseInt(selectedYear) + 1} already exists!`;
+          form.onsubmit = () => false;
         } else {
           errorDiv.style.display = "none";
-          form.onsubmit = null; // Allow submit
+          errorDiv.innerText = "";
+          form.onsubmit = null; // allow submit
         }
+      })
+      .catch(() => {
+        errorDiv.style.display = "block";
+        errorDiv.innerText = "Error validating year. Please try again.";
+        form.onsubmit = () => false;
       });
   });
-});
 
+  /* ---------- Final Safety Check on Submit ---------- */
+  form.addEventListener("submit", function (e) {
+    if (!yearDropdown.value) {
+      e.preventDefault();
+      errorDiv.style.display = "block";
+      errorDiv.innerText = "Assessment Year is required.";
+    }
+  });
+});