I created a post form and i would like to calculate the hours:mins when the user enters the start time and end time. I created fields for 'start time' 'end time' 'hours worked' and then added the following jquery to the post form:
$(function () {
function calculate() {
var time1 = $(".Time1").val().split(':'), time2 = $(".Time2").val().split(':');
var hours1 = parseInt(time1[0], 10),
hours2 = parseInt(time2[0], 10),
mins1 = parseInt(time1[1], 10),
mins2 = parseInt(time2[1], 10);
var hours = hours2 - hours1, mins = 0;
if(hours <= 0) hours = 24 + hours;
if(mins2 >= mins1) {
mins = mins2 - mins1;
}
else {
mins = (mins2 + 60) - mins1;
hours--;
}
mins = mins / 60; // take percentage in 60
hours += mins;
hours = hours.toFixed(2);
$(".Hours").val(hours);
}
$(".Time1,.Time2").change(calculate);
calculate();
});
I have 'start time' the class of Time1
I gave 'end time' the class of Time2
I gave 'work hours' the class of Hours
But I cannot get the calculation to show up in the Work Hours cred field. How do I get the calculation to show up in the field AND write to that field once the user submits?
Thanks!
Hi,
Thank you for contacting us and I'd be happy to assist.
Although 1-1 custom code assistance is beyond the scope of support that we provide, we do our best to guide in the right direction, whenever possible.
To troubleshoot this, I'll need to see how these fields and the form is set up in the admin area.
Can you please share temporary admin login details along with the link to a page with this form?
Note: Your next reply will be private and please make a complete backup copy, before sharing the access details.
regards,
Waqar
Thank you for sharing the admin access.
During troubleshooting, I was able to make the custom script work, after some modifications:
jQuery( document ).ready(function() {
calculate();
});
jQuery(".Time1,.Time2").change(calculate);
function calculate() {
var time1 = jQuery(".Time1").val().split(':'), time2 = jQuery(".Time2").val().split(':');
var hours1 = parseInt(time1[0], 10),
hours2 = parseInt(time2[0], 10),
mins1 = parseInt(time1[1], 10),
mins2 = parseInt(time2[1], 10);
var hours = hours2 - hours1, mins = 0;
if(hours <= 0) hours = 24 + hours;
if(mins2 >= mins1) {
mins = mins2 - mins1;
}
else {
mins = (mins2 + 60) - mins1;
hours--;
}
mins = mins / 60; // take percentage in 60
hours += mins;
hours = hours.toFixed(2);
if (!isNaN(hours)) {
jQuery(".Hours").val(hours);
}
}
This should do the trick and for more personalized assistance around custom code, you can consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/
Hi Waqar. I tested the page /shifts and it is not calculating. Did you create a different form to test this?
One more question, once the fields are calculated to 'hours' how can I write calculation to the 'work hours' custom field?
Thanks!
Hi,
Thanks for writing back and sorry about the delay in getting back on this.
I tested the updated script that I shared in my last message, in the same form that was being used on the page /shifts and it worked.
( you'll just have to replace the old/existing custom script from the form's "JS editor" section with the one I sent )
At the moment, the Toolset Forms plugin is not active on your website, but you're welcome to activate the plugin and then test the updated custom script.
Note: when the calculated hours worked value will be inserted in the correct form field, the form should save it to the corresponding custom field, automatically.
Please let me know how it goes.
regards,
Waqar
Sorry, CRED was deactivated temporarily to troubleshoot another issue., It's still not working. Are you using a different form than me? Can you please tell me how you are getting this to work?
Hi,
I didn't create a new form and the use the same "Add Time" form that is placed in the "Shifts" page.
When I checked the form "Add Time", it had the old custom script in "JS editor".
( screenshot: versteckter Link )
Old script:
$(function () {
function calculate() {
var time1 = $(".Time1").val().split(':'), time2 = $(".Time2").val().split(':');
var hours1 = parseInt(time1[0], 10),
hours2 = parseInt(time2[0], 10),
mins1 = parseInt(time1[1], 10),
mins2 = parseInt(time2[1], 10);
var hours = hours2 - hours1, mins = 0;
if(hours <= 0) hours = 24 + hours;
if(mins2 >= mins1) {
mins = mins2 - mins1;
}
else {
mins = (mins2 + 60) - mins1;
hours--;
}
mins = mins / 60; // take percentage in 60
hours += mins;
hours = hours.toFixed(2);
$(".Hours").val(hours);
}
$(".Time1,.Time2").change(calculate);
calculate();
});
I've replaced that old script with the updated one that I shared in my reply, earlier.
( ref: https://toolset.com/forums/topic/calculate-start-time-end-time-in-cred/#post-1710269 )
After that, I tested the form and it calculated the time difference between start and end time and filled the value in the worked time field, correctly.
Front-end screenshot: versteckter Link
And then I checked the form submission in the backend for a newly created time post "CRED Auto Draft e9ea09045b64439ddaab5354ba079f81" and it also showed the values correctly saved.
Front-end screenshot: versteckter Link
Please test the form now and let me know how it goes.
regards,
Waqar
I'm still having the same issue. I've tried this on 3 different computers using different browsers and it doesn't work. I goto /shifts enter the start / end times and it does not calculate. I've tried without clicking calculate (which is preferred) and with clicking calculate. No matter what it does not calculate - what am I missing?
I figured out the disconnect. I had NOT been entering the ':' in the time. That is why it was not working. I need to validate for that. Sorry. My fault. Thanks Waqar!
My issue is resolved now. Thank you!
