Please refer image of the form below
We have a single table for each day of the week and each day of the week can have 3 rows
using "ADD" button. For field "Entitlements" class is "ENT" across the table. For field "Hours/Unit"class is "HrsUnit" across the table.
For each row we have a dropdown field "Entitlements" and based on the selection of this
field, we populate the "Hours/Unit" field. The business rule for this is:
ACO(value 1) ==> "Hrs/Unit" should be "1" and Readonly
ATR(value 2) ==> "Hrs/Unit" should be "1" and Readonly
ECO(value 3) ==> "Hrs/Unit" should be more than "4"
MU 1 & 2(value 4) ==> "Hrs/Unit" is an open field
PC 1 & 2(value 5) ==> "Hrs/Unit" is an open field
PHW(value 6) ==> "Hrs/Unit" is an open field
SBR(value 7) ==> "Hrs/Unit" should be "1" and Readonly
That code is as below:
//***Entitlement and Hrs/Unit
$('.cf-table-block').on('change', Entitle);
function Entitle() {
$('.cf-table-block tbody tr').each(function () {
var entHrUn = "";
var chkEnt = "";
$(this).find('.ENT option:selected').each(function () {
entHrUn = $(this).val();
if(entHrUn == "1" || entHrUn == "2" || entHrUn == "7"){
$('.HrsUnit input').val('1').attr('readonly', 'readonly');
}
else {
$('.HrsUnit input').removeAttr('readonly');
}
chkEnt = $('.HrsUnit input').val();
if(entHrUn == "3" && chkEnt < "4"){
alert('Invalid Input');
}
});
});
}
//***Entitlement and Hrs/Unit COMPLETE
As can be seen, we have written a loop for all days of the week, to follow the above logic,
using classes, but this fails. We were able to achieve this using id's but then we will
have to code individually for each row for each day that is 21 rows. Could you please help
us to resolve this issue using the classes or please provide us with an efficient solution.
Note: In the same attached form we were able write code for a similar case as above where
using input of fields "Start Time", "Finish Time" and "Break" we calculate "Total Hours" for each row for all rows of the week. For field "Start Time" class is "TimeIN" for "Finish Time" class is "TimeOUT" for field "Break" class is "Lunch" for field "Total Hours" class is "TotalHours" across the table. That code is as below:
//****Subtract InTime and OutTime
$('.cf-table-block').on('blur', 'input', SumHours);
function SumHours() {
var sum = 0;
$('.cf-table-block tbody tr').each(function () {
var s = 0;
var t=0, h=0, m=0;
var x=0, y=0, p=0;
$(this).find('.TimeIN input').each(function () {
t=$(this).val().split(':');
h=parseInt(t[0], 10);
m=parseInt(t[1], 10);
s -= parseNumber(h+(m/60));
y = parseNumber(h+(m/60));
});
$(this).find('.TimeOUT input').each(function () {
t=$(this).val().split(':');
h=parseInt(t[0], 10);
m=parseInt(t[1], 10);
var x = parseNumber(h+(m/60));
if (x < y)
s = s + 24 + parseNumber(h+(m/60));
else
s += parseNumber(h+(m/60));
});
$(this).find('.Lunch input').each(function () {
s -= parseNumber($(this).val()/60);
});
if(s >0){
$(this).find('.TotalHours input').val(s);
sum += s;
}
});
}//****Subtract InTime and OutTime COMPLETE
function parseNumber(n) {
var f = parseFloat(n); //Convert to float number.
return isNaN(f) ? 0 : f; //treat invalid input as 0;
}//****Subtract InTime and OutTime Function COMPLETE
We appreciate any feedback or suggestions and Thank you in advance.
Rajesh