Question

I’m building a time tracking system. Users would enter hours worked during the week. We have biweekly pay periods (2 weeks). Once daily hours have been entered, onChange is used trigger a javascript function that calculates weekly total and outputs it to read-only input text boxes (txtWeek1Total and txtWeek2Total). That part works.

The next step is to automatically calculate the pay period total (week 1 + week 2) based on the input values from txtWeek1Total and txtWeek2Total. Currently, I’m using onChange on these text boxes but it does not fire. It gets triggered only if I manually input a value into the weekly total text boxes. Even if these values get updated automatically when the user enter daily hours.

html:

<input type="text" id="week1SundayTotal" onChange="calculateWeeklyHours('week1');" /><br />
<input type="text" id="week1MondayTotal" onChange="calculateWeeklyHours('week1');" /><br />
<input type="text" id="week1TuesdayTotal" onChange="calculateWeeklyHours('week1');" /><br />
<input type="text" id="week1WednesdayTotal" onChange="calculateWeeklyHours('week1');" /><br />
<input type="text" id="week1ThursdayTotal" onChange="calculateWeeklyHours('week1');" /><br />
<input type="text" id="week1FridayTotal" onChange="calculateWeeklyHours('week1');" /><br />
<input type="text" id="week1SaturdayTotal" onChange="calculateWeeklyHours('week1');" /><br />
<input type="text" id="week1WeekTotal" onChange="calculateTotal();" /><br /><br />

<input type="text" id="week2SundayTotal" onChange="calculateWeeklyHours('week2');" /><br />
<input type="text" id="week2MondayTotal" onChange="calculateWeeklyHours('week2');" /><br />
<input type="text" id="week2TuesdayTotal" onChange="calculateWeeklyHours('week2');" /><br />
<input type="text" id="week2WednesdayTotal" onChange="calculateWeeklyHours('week2');"  /><br />
<input type="text" id="week2ThursdayTotal" onChange="calculateWeeklyHours('week2');"  /><br />
<input type="text" id="week2FridayTotal" onChange="calculateWeeklyHours('week2');"  /><br />
<input type="text" id="week2SaturdayTotal" onChange="calculateWeeklyHours('week2');"  /><br />
<input type="text" id="week2WeekTotal" onChange="calculateWeeklyHours('week2');"  /><br />

<input type="text" id="Total" />

javascript:

function calculateWeeklyHours(week) {
var sunday = document.getElementById(week + 'SundayTotal').value;
var monday = document.getElementById(week + 'MondayTotal').value;
var tuesday = document.getElementById(week + 'TuesdayTotal').value;
var wednesday = document.getElementById(week + 'WednesdayTotal').value;
var thursday = document.getElementById(week + 'ThursdayTotal').value;
var friday = document.getElementById(week + 'FridayTotal').value;
var saturday = document.getElementById(week + 'SaturdayTotal').value;

var weekTotal = document.getElementById(week + 'WeekTotal');
weekTotal.value = Number(sunday) + Number(monday) + Number(tuesday) + Number(wednesday) + Number(thursday) + Number(friday) + Number(saturday);
}

function calculateTotal() {
    var week1 = document.getElementById('w1WeekTotal').value;
    var week2 = document.getElementById('w2WeekTotal').value;

    var total = document.getElementById('Total');
    total.value = Number(week1) + Number(week2);
}

Answer 1

Use onkeyup event instead of onchange event – check this (http://jsfiddle.net/JrDd3/2/)