Trigger Section Visibility using Custom HTML

Hi

I have 4 date pickers, each pair evaluates whether expected date and completed date to decided if the task is late.

i am trying to show/hide a section based on the value of each pair

each pair has JavaScript for evaluate this

First Pair of date pickers for Task Status updates text box TaskStatus with the result On Time or Late

<script type="text/javascript">
$('input[name="TaskStart"], input[name="TaskEnd"]').change( function(){
      d1 = $('input[name="TaskStart"]').datepicker('getDate');
      d2 = $('input[name="TaskEnd"]').datepicker('getDate');
      TaskStatus = "";
      if(($('input[name="TaskStart"]').datepicker('getDate') === null) || ($('input[name="TaskEnd"]').datepicker('getDate') === null))
      {
          TaskStatus = ""
      }
      if (d1 >= d2 && (($('input[name="TaskStart"]').datepicker('getDate') !== null) && ($('input[name="TaskEnd"]').datepicker('getDate') !== null))) 
      {
            TaskStatus = "On Time"
      }
      if (d1 < d2) 
      {
            TaskStatus = "Late"
      }
      $('input[name=TaskStatus]').val(diff);
});
</script>

Second Pair of date pickers for Approval Status updates text box ApprovalStatus with the result On Time or Late

<script type="text/javascript">
$('input[name="ApprovalStart"], input[name="ApprovalEnd"]').change( function(){
      d1 = $('input[name="ApprovalStart"]').datepicker('getDate');
      d2 = $('input[name="ApprovalEnd"]').datepicker('getDate');
      ApprovalStatus = "";
      if(($('input[name="ApprovalStart"]').datepicker('getDate') === null) || ($('input[name="ApprovalEnd"]').datepicker('getDate') === null))
      {
          ApprovalStatus = ""
      }
      if (d1 >= d2 && (($('input[name="ApprovalStart"]').datepicker('getDate') !== null) && ($('input[name="ApprovalEnd"]').datepicker('getDate') !== null))) 
      {
            ApprovalStatus = "On Time"
      }
      if (d1 < d2) 
      {
            ApprovalStatus = "Late"
      }
      $('input[name=ApprovalStatus]').val(diff);
});
</script>

Both above JavaScripts seems to be working fine as they do update the Status Text boxes. also i have applied "Auto Populate Saved Value?" and i can confirm that data is saved in the record.

i want "LateReason" section to be displayed if either TaskStatus or ApprovalStatus is "Late".

i have tried visibility controls on the section visibility without any luck

how can i include section show/hide in my javascript?

Thanks in advance

Trigger Section Visibility using Custom HTML

1 answer