diff --git a/attendance/forms.py b/attendance/forms.py
index cebd97b0c..3637d4730 100644
--- a/attendance/forms.py
+++ b/attendance/forms.py
@@ -198,7 +198,7 @@ class AttendanceUpdateForm(ModelForm):
         )
         self.fields["attendance_date"].widget.attrs.update(
             {
-                "onchange": "dateChange($(this))",
+                "onchange": "attendanceDateChange($(this))",
             }
         )
         self.fields["work_type_id"].widget.attrs.update({"id": str(uuid.uuid4())})
@@ -302,7 +302,7 @@ class AttendanceForm(ModelForm):
         )
         self.fields["attendance_date"].widget.attrs.update(
             {
-                "onchange": "dateChange($(this))",
+                "onchange": "attendanceDateChange($(this))",
             }
         )
         self.fields["work_type_id"].widget.attrs.update({"id": str(uuid.uuid4())})
@@ -546,7 +546,7 @@ class AttendanceRequestForm(ModelForm):
         )
         self.fields["attendance_date"].widget.attrs.update(
             {
-                "onchange": "dateChange($(this))",
+                "onchange": "attendanceDateChange($(this))",
             }
         )
         self.fields["work_type_id"].widget.attrs.update({"id": str(uuid.uuid4())})
diff --git a/attendance/templates/requests/attendance/view-requests.html b/attendance/templates/requests/attendance/view-requests.html
index a39c996d7..c8ce0ea2d 100644
--- a/attendance/templates/requests/attendance/view-requests.html
+++ b/attendance/templates/requests/attendance/view-requests.html
@@ -49,52 +49,6 @@
 </div>
 
 <script>
-  function shiftChange(selectElement) {
-    var shiftId =selectElement.val()
-    let parentForm = selectElement.parents().closest("form")
-    var attendanceDate = parentForm.find("[name=attendance_date]").first().val()
-    $.ajax({
-      type: "post",
-      url: "{% url 'update-shift-details' %}",
-      data: {
-        csrfmiddlewaretoken: getCookie("csrftoken"),
-        "shift_id":shiftId,
-        "attendance_date":attendanceDate
-
-      },
-      success: function (response) {
-        parentForm.find("[name=attendance_clock_in]").val(response.shift_start_time)
-        parentForm.find("[name=attendance_clock_out]").val(response.shift_end_time)
-        parentForm.find("[name=attendance_worked_hour]").val(response.worked_hour)
-        parentForm.find("[name=minimum_hour]").val(response.minimum_hour)
-        parentForm.find("[name=attendance_clock_out_date]").val(response.checkout_date)
-        parentForm.find("[name=attendance_clock_in_date]").val(response.checkin_date)
-        if (parentForm.find("[name=attendance_date]").val().length == 0) {
-          parentForm.find("[name=attendance_date]").val(response.checkin_date)
-        }
-      }
-    });
-  }
-
-  function dateChange(selectElement) {
-    var selectedDate =selectElement.val()
-    let parentForm = selectElement.parents().closest("form")
-    var shiftId = parentForm.find("[name=shift_id]").val()
-
-    $.ajax({
-      type: "post",
-      url: "{% url 'update-date-details' %}",
-      data: {
-        csrfmiddlewaretoken: getCookie("csrftoken"),
-        "attendance_date":selectedDate,
-        "shift_id":shiftId
-      },
-      success: function (response) {
-        parentForm.find("[name=minimum_hour]").val(response.minimum_hour)
-
-      }
-    });
-  }
 
   function enlargeImage(src,$element) {
       $(".enlargeImageContainer").empty()
diff --git a/static/index/index.js b/static/index/index.js
index 914aad2c9..65eca8b7e 100644
--- a/static/index/index.js
+++ b/static/index/index.js
@@ -105,3 +105,276 @@ nav.after(
   `
   )
 );
+
+
+
+function empleavetypeChange(selectElement) {
+  var selectedLeavetype =selectElement.val()
+  let parentForm = selectElement.parents().closest("form")
+  var employeeId = parentForm.find('[name = employee_id]').val()
+  var start_date = parentForm.find('[name = start_date_id]').val()
+  $.ajax({
+    type: "post",
+    url: "/leave/employee-leave-details",
+    data: {
+    csrfmiddlewaretoken: getCookie("csrftoken"),
+    "leave_type":selectedLeavetype,
+    "employee_id":employeeId,
+    "date":start_date,
+    },
+    success: function (response) {
+      
+      // Assuming parentForm is a reference to the form containing the element to update
+      var messageDiv = parentForm.find(".leave-message");
+
+      // Check if the messageDiv already exists, if not create it
+      if (!messageDiv.length) {
+        messageDiv = $("<div class='leave-message'></div>");
+        parentForm.prepend(messageDiv);
+      }
+      // Checking leave type is selected in the form or not
+      if (response.leave_count != '' && response.employee != ''){
+        messageDiv.show()
+        messageDiv.text("Available Leaves :  " + response.leave_count);
+        messageDiv.css({
+          'background-color': '#dff0d8',
+          'border': '2px solid #3c763d',
+          'border-radius': '18px',
+          'padding': '10px',
+          'font-weight': 'bold',
+          'margin-bottom': '15px',
+          'width': '35%'
+        });
+      }
+      else if ( selectedLeavetype === ''){
+        messageDiv.hide()
+      }
+      else if (selectedLeavetype != '' && response.leave_count === '' && response.employee != ''){
+        messageDiv.show()
+        messageDiv.text("Leave type is not assigned for selecetd employee.");
+        messageDiv.css({
+          'background-color': 'rgb(229 79 56 / 17%)',
+          'border': '2px solid hsl(8,77%,56%)',
+          'border-radius': '18px',
+          'padding': '10px',
+          'font-weight': 'bold',
+          'margin-bottom': '15px',
+          'width': 'auto'
+        });
+      }
+      else if (response.leave_count === 0.0){
+        messageDiv.show()
+        messageDiv.text("Available Leaves :  " + response.leave_count);
+        messageDiv.css({
+          'background-color': 'rgb(229 79 56 / 17%)',
+          'border': '2px solid hsl(8,77%,56%)',
+          'border-radius': '18px',
+          'padding': '10px',
+          'font-weight': 'bold',
+          'margin-bottom': '15px',
+          'width': '35%'
+        });
+      }
+      else{
+        messageDiv.hide()
+      }
+
+    }
+  });
+}
+
+
+function employeeChange(selectElement) {
+  var employeeId =selectElement.val()
+  let parentForm = selectElement.parents().closest("form")
+  var leavetypeId = parentForm.find('[name = leave_type_id]').val()
+  var start_date = parentForm.find('[name = start_date_id]').val()
+  $.ajax({
+    type: "post",
+    url: "/leave/employee-leave-details",
+    data: {
+    csrfmiddlewaretoken: getCookie("csrftoken"),
+    "leave_type":leavetypeId,
+    "employee_id":employeeId,
+    "date":start_date,
+    },
+    success: function (response) {
+      
+      // Assuming parentForm is a reference to the form containing the element to update
+      var messageDiv = parentForm.find(".leave-message");
+
+      // Check if the messageDiv already exists, if not create it
+      if (!messageDiv.length) {
+        messageDiv = $("<div class='leave-message'></div>");
+        parentForm.prepend(messageDiv);
+      }
+      // Checking leave type is selected in the form or not
+      if (response.leave_count != '' && response.employee != ''){
+        messageDiv.show()
+        messageDiv.text("Available Leaves :  " + response.leave_count);
+        messageDiv.css({
+          'background-color': '#dff0d8',
+          'border': '2px solid #3c763d',
+          'border-radius': '18px',
+          'padding': '10px',
+          'font-weight': 'bold',
+          'margin-bottom': '15px',
+          'width': '35%'
+        });
+      }
+      else if ( leavetypeId === ''){
+        messageDiv.hide()
+      }
+      else if (leavetypeId != '' && response.leave_count === '' && response.employee != ''){
+        messageDiv.show()
+        messageDiv.text("Leave type is not assigned for selecetd employee.");
+        messageDiv.css({
+          'background-color': 'rgb(229 79 56 / 17%)',
+          'border': '2px solid hsl(8,77%,56%)',
+          'border-radius': '18px',
+          'padding': '10px',
+          'font-weight': 'bold',
+          'margin-bottom': '15px',
+          'width': 'auto'
+        });
+      }
+      else if (response.leave_count === 0.0){
+        messageDiv.show()
+        messageDiv.text("Available Leaves :  " + response.leave_count);
+        messageDiv.css({
+          'background-color': 'rgb(229 79 56 / 17%)',
+          'border': '2px solid hsl(8,77%,56%)',
+          'border-radius': '18px',
+          'padding': '10px',
+          'font-weight': 'bold',
+          'margin-bottom': '15px',
+          'width': '35%'
+        });
+      }
+      else{
+        messageDiv.hide()
+      }
+
+    }
+  });
+}
+
+function dateChange(selectElement) {
+  let parentForm = selectElement.parents().closest("form")
+  var employeeId = parentForm.find('[name = employee_id]').val()
+  var leavetypeId = parentForm.find('[name = leave_type_id]').val()
+  var start_date = selectElement.val()
+  $.ajax({
+    type: "post",
+    url: "/leave/employee-leave-details",
+    data: {
+    csrfmiddlewaretoken: getCookie("csrftoken"),
+    "leave_type":leavetypeId,
+    "employee_id":employeeId,
+    "date": start_date,
+    },
+    success: function (response) {
+      // Assuming parentForm is a reference to the form containing the element to update
+      var messageDiv = parentForm.find(".leave-message");
+
+      // Check if the messageDiv already exists, if not create it
+      if (!messageDiv.length) {
+        messageDiv = $("<div class='leave-message'></div>");
+        parentForm.prepend(messageDiv);
+      }
+      // Checking leave type is selected in the form or not
+      if (response.leave_count != '' && response.employee != '') {
+        messageDiv.show()
+        messageDiv.text("Available Leaves :  " + response.leave_count);
+        messageDiv.css({
+          'background-color': '#dff0d8',
+          'border': '2px solid #3c763d',
+          'border-radius': '18px',
+          'padding': '10px',
+          'font-weight': 'bold',
+          'margin-bottom': '15px',
+          'width': '35%'
+        });
+      }
+      else if ( leavetypeId === ''){
+        messageDiv.hide()
+      }
+      else if (leavetypeId != '' && response.leave_count === '' && response.employee != ''){
+        messageDiv.show()
+        messageDiv.text("Leave type is not assigned for selecetd employee.");
+        messageDiv.css({
+          'background-color': 'rgb(229 79 56 / 17%)',
+          'border': '2px solid hsl(8,77%,56%)',
+          'border-radius': '18px',
+          'padding': '10px',
+          'font-weight': 'bold',
+          'margin-bottom': '15px',
+          'width': 'auto'
+        });
+      }
+      else if (response.leave_count === 0.0){
+        messageDiv.show()
+        messageDiv.text("Available Leaves :  " + response.leave_count);
+        messageDiv.css({
+          'background-color': 'rgb(229 79 56 / 17%)',
+          'border': '2px solid hsl(8,77%,56%)',
+          'border-radius': '18px',
+          'padding': '10px',
+          'font-weight': 'bold',
+          'margin-bottom': '15px',
+          'width': '35%'
+        });
+      }
+      else{
+        messageDiv.hide()
+      }
+    }
+  });
+}
+
+function shiftChange(selectElement) {
+  var shiftId =selectElement.val()
+  let parentForm = selectElement.parents().closest("form")
+  var attendanceDate = parentForm.find("[name=attendance_date]").first().val()
+  $.ajax({
+    type: "post",
+    url: "/attendance/update-shift-details",
+    data: {
+      csrfmiddlewaretoken: getCookie("csrftoken"),
+      "shift_id":shiftId,
+      "attendance_date":attendanceDate
+
+    },
+    success: function (response) {
+      parentForm.find("[name=attendance_clock_in]").val(response.shift_start_time)
+      parentForm.find("[name=attendance_clock_out]").val(response.shift_end_time)
+      parentForm.find("[name=attendance_worked_hour]").val(response.worked_hour)
+      parentForm.find("[name=minimum_hour]").val(response.minimum_hour)
+      parentForm.find("[name=attendance_clock_out_date]").val(response.checkout_date)
+      parentForm.find("[name=attendance_clock_in_date]").val(response.checkin_date)
+      if (parentForm.find("[name=attendance_date]").val().length == 0) {
+        parentForm.find("[name=attendance_date]").val(response.checkin_date)
+      }
+    }
+  });
+}
+
+function attendanceDateChange(selectElement) {
+  var selectedDate =selectElement.val()
+  let parentForm = selectElement.parents().closest("form")
+  var shiftId = parentForm.find("[name=shift_id]").val()
+
+  $.ajax({
+    type: "post",
+    url: "/attendance/update-date-details",
+    data: {
+      csrfmiddlewaretoken: getCookie("csrftoken"),
+      "attendance_date":selectedDate,
+      "shift_id":shiftId
+    },
+    success: function (response) {
+      parentForm.find("[name=minimum_hour]").val(response.minimum_hour)
+
+    }
+  });
+}
\ No newline at end of file