Question

Calculation in Form for leave application

Forms

Updated February 21, 2020

asked on July 21, 2016

Hi all,

i trying to create a leave application.In this form, I need to do simple calculation in a read only text field Refer to my form design in the attachment. Is there a way for me to update the No. Of Days to 0.5 if my AM/PM field dropdownlist is AM / PM selection.

Please advise.

Thank you.

Capture.JPG (27.33 KB)

| Download

0 0

Answer

SELECTED ANSWER

replied on July 24, 2016 • Show version history

Thanks for this guys, I've been working on the same calculations using a post from Dan Phair to exclude the weekends from the total leave calculation, and have added in the javascript from above to allow the option for a half day selection using a "Yes/No" radio button (defaulting to "No").

Here's the final version, noting that the calculations only work if the date format is dd-MMM-yy (not sure why this is). "sdate" is the CSS class for the leave start date, "edate" is the end date, "total" is the total number of leave days excluding weekends. Hopefully the rest is self-explanatory:

function sumtotal() {
        var s = 0;
      	var e = 0;
  
      	//Get dates from input and reformat, then create date var
        $('.sdate input').each(function () {
          	s1 = $(this).val().replace("-", " ");
          	s2 = s1.replace("-", " 20");
            s = new Date(s2);
        });
      	$('.edate input').each(function () {
          	e1 = $(this).val().replace("-", " ");
          	e2 = e1.replace("-", " 20");
            e = new Date(e2);
        });
      
      var one_day = 1000 * 60 * 60 * 24;
      var startMillis = s.getTime();
      var endMillis = e.getTime();
      var totalDays = Math.round((endMillis - startMillis)/one_day);
      var weekend = 0;
      var days = 0;
      
      for (var i = startMillis; i < endMillis; i += one_day) {
        var currentDay = new Date(i);
        if (currentDay.getDay() == 5 || currentDay.getDay() == 6) {
          weekend++;
        }
      }
  
  	  //Check whether the half day radio button is "Yes"
  	  var choice = $('.halfday :checked').val();
        if (choice == 'Yes') {
          days = (totalDays+1) - 0.5;
        } else {
		  days = (totalDays+1) - weekend;
        }
          
      		//Output value in the total class box
            if (isNaN(days)) {
      			$('.total input').val('Select dates');
            } else {
            	$('.total input').val(days);                
            }
      
     	if (e.getTime() < s.getTime()) {
	       	$('.edate input').val($('.sdate input').val());
        	sumtotal();
      	}
}

$(document).ready(function () {
  
    $(".sdate input").on('blur change', sumtotal);
  	$(".edate input").on('blur change', sumtotal);
  	$(".halfday input").on('blur change', sumtotal);  
    $(".read-only *").prop("readonly", true);

});

It seems to work well, but I'm not a coder so if you have a better approach please feel free to suggest it.

1 0

Replies

replied on July 22, 2016

Jason,

You could put this in the javascript section. Just change go to the advanced tab of the am/pm dropdown box in the edit screen and set "amPm" as the class name, and change #Field24 to whatever the Field number is for your No Of Days field (this will be the 'q' number). This code will change the number to 0.5 if "AM" is chosen from the dropdown, otherwise it will set the number to 1.

 $(document).ready(function () {
  $(".amPm select").change(function () {
    
    var choice = $(".amPm select").val();
    if (choice == "AM"){
    $("#Field24").val(0.5);
    }
    else {
    $("#Field24").val(1);
    }
  });
  });

1 0

replied on July 24, 2016

Hi Rick,

Thank you so much for your suggestion. It is working perfectly!.

Jason

0 0

replied on July 22, 2016

0 0

replied on July 22, 2016 • Show version history


function days_between(date1, date2) {

    // The number of milliseconds in one day
    var ONE_DAY = 1000 * 60 * 60 * 24;

    // Convert both dates to milliseconds
    var date1_ms = date1.getTime();
    var date2_ms = date2.getTime();

    // Calculate the difference in milliseconds
    var difference_ms = Math.abs(date1_ms - date2_ms);

    // Convert back to days and return
    return Math.round(difference_ms/ONE_DAY);

};

$(document).ready(function() {
  
  $('.amPm select').change(function() {
     
     var startDate = new Date($('#Field5').val()); //field id of start date
     var endDate =   new Date($('#Field4').val()); //field id of end date
     var numDays= days_between(startDate, endDate); //gets the number of days inbetween

     var choice = $('.amPm select').val();
     if (choice == 'AM') {
       numDays+=0.5;
     } else {
       numDays+= 1;
     }
     $('#Field2').val(numDays); //Whatever the field id of your no of day is
     
  });

});

This builds on Rick's solution. Using this code you can also compute the number of days in between the dates. You can also add '.change()' on the date selectors to recompute the No of Days if those selectors change.

0 0

SELECTED ANSWER

replied on July 24, 2016 • Show version history

function sumtotal() {
        var s = 0;
      	var e = 0;
  
      	//Get dates from input and reformat, then create date var
        $('.sdate input').each(function () {
          	s1 = $(this).val().replace("-", " ");
          	s2 = s1.replace("-", " 20");
            s = new Date(s2);
        });
      	$('.edate input').each(function () {
          	e1 = $(this).val().replace("-", " ");
          	e2 = e1.replace("-", " 20");
            e = new Date(e2);
        });
      
      var one_day = 1000 * 60 * 60 * 24;
      var startMillis = s.getTime();
      var endMillis = e.getTime();
      var totalDays = Math.round((endMillis - startMillis)/one_day);
      var weekend = 0;
      var days = 0;
      
      for (var i = startMillis; i < endMillis; i += one_day) {
        var currentDay = new Date(i);
        if (currentDay.getDay() == 5 || currentDay.getDay() == 6) {
          weekend++;
        }
      }
  
  	  //Check whether the half day radio button is "Yes"
  	  var choice = $('.halfday :checked').val();
        if (choice == 'Yes') {
          days = (totalDays+1) - 0.5;
        } else {
		  days = (totalDays+1) - weekend;
        }
          
      		//Output value in the total class box
            if (isNaN(days)) {
      			$('.total input').val('Select dates');
            } else {
            	$('.total input').val(days);                
            }
      
     	if (e.getTime() < s.getTime()) {
	       	$('.edate input').val($('.sdate input').val());
        	sumtotal();
      	}
}

$(document).ready(function () {
  
    $(".sdate input").on('blur change', sumtotal);
  	$(".edate input").on('blur change', sumtotal);
  	$(".halfday input").on('blur change', sumtotal);  
    $(".read-only *").prop("readonly", true);

});

It seems to work well, but I'm not a coder so if you have a better approach please feel free to suggest it.

1 0

replied on July 24, 2016

Hi Mike,

Your method work perfectly on calculating half day. But i facing a issues on passing value on the total days. Please refer to my screenshot on the before and after submission of the leave. It don seem to be able to store the no of days to the next form.

i not familiar with javascript. Did the script above assign back the calculation value back to the field?

Thank you

Before Submit.JPG (40.62 KB)

| Download

After Submit.JPG (37.71 KB)

| Download

0 0

replied on July 24, 2016

Hi Jason,

There's an explanation to that here. To implement the suggested fix, change your "No Of Days" field design, removing the "Read-only" selection and add "read-only" (without the quotation marks) to the CSS class on the "Advanced" tab of the field settings. Then update your JavaScript as per my example code above where I've added the read-only final line to the code. That should sort it.

Cheers,

Mike

0 0

replied on February 21, 2020

Hi Mike,

I just came across this, I have similar scenario, but 2 halfday tokens:

halfday

halfday1

both are Radio button, can you please tell me how to get it in this case?

0 0

replied on July 24, 2016

P.S. The code for the half day calculation was Rick's, so credit to him, I just borrow from people who know what they're doing.

0 0

replied on July 24, 2016

Guys,

All the helps and suggestions you guy provided really help me alot.

Thanks again!

0 0

You are not allowed to follow up in this post.

Question

Question

Calculation in Form for leave application

Answer

Replies

Sign in to reply to this post.