asked on

simple payroll calculator javascript

I'm working on creating a calculator that will work with my HTML. I have 7 text boxes that i can enter the hours in(Monday-Sunday) on the bottom i have the total of hours for week. I used Jquary to create this funtion: Here is the logic
$(document).ready(function () {

//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".txt").each(function () {

$(this).keyup(function () {
calculateSum();
});
});

});

function calculateSum() {

var sum = 0;
var ot=0;
//iterate through each textboxes and add the values
$(".txt").each(function () {

//add only if the value is number
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);

}

});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum").html(sum.toFixed(2));
}

Im my HTML i have 2 other text boxes that i need to generate after i have my total. The first one is overtime hours. This means that if a number entered into each day is more than 10 hours it will populate in the overtime field.

The second testbox is the gross pay. I need to give the total of the hours worked times by 10 and overtime hours times by 15

I'm attaching my code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">

$(document).ready(function () {

    //iterate through each textboxes and add keyup
    //handler to trigger sum event
    $(".txt").each(function () {

        $(this).keyup(function () {
            calculateSum();
        });
    });

});

function calculateSum() {

    var sum = 0;
    var ot=0;
    //iterate through each textboxes and add the values
    $(".txt").each(function () {

        //add only if the value is number
        if (!isNaN(this.value) && this.value.length != 0) {
            sum += parseFloat(this.value);
           

        }

    });
    //.toFixed() method will roundoff the final sum to 2 decimal places
    $("#sum").html(sum.toFixed(2));
}














</script>
		<style type="text/css">
			.style1 {
				text-decoration: underline;
			}
		</style>
	</head>
	<body>

		</p>
		<p>
			Example:&nbsp; If an employee works more than 40 hours, he or she is entitled to
			overtime.&nbsp; For instance, if the clients works 42 hours and the client&#39;s
			hourly wage is $10.00, she is entitle to 40 hours at a rate of 10.00 (400) and 2
			hours at rate of 15 ($30.00).&nbsp; The employee total salary is 430.
		</p>
		<h1>Points </h1>

		<div class=''>
			<table id='weeklyPay' width='650px'>
				<tr>
					<td><label> Monday</label></td>
					<td>
					<input class="txt" type="text" name="txt" />
					</td>
					<td rowspan='10' valign='top'><h1> Message</h1><div id='errormessage'></div></td>
				</tr>
				<tr>
					<td><label> Tuesday</label></td>
					<td>
					<input class="txt" type="text" name="txt"/>
					</td>
				</tr>
				<tr>
					<td><label> Wednesday</label></td>
					<td>
					<input class="txt" type="text" name="txt" />
					</td>
				</tr>
				<tr>
					<td><label> Thursday</label></td>
					<td>
					<input class="txt" type="text" name="txt" />
					</td>
				</tr>
				<tr>
					<td><label> Friday</label></td>
					<td>
					<input class="txt" type="text" name="txt" />
					</td>
				</tr>
				<tr>
					<td><label> Saturday</label></td>
					<td>
					<input class="txt" type="text" name="txt" />
					</td>
				</tr>
				<tr>
					<td><label> Sunday</label></td>
					<td>
					<input class="txt" type="text" name="txt" />
					</td>
				</tr>
				<tr id='rowHoursWorked'>
                <td><label class='number'> Total Hours Worked</label></td>
					<td><label class='number' id='sum'>0</label></td>
					<td >
					<input class='money' type='text' />
					</td>
				</tr>
                					<td><label class='number'> Total
						Overtime Hours</label></td>
					<td >
					<input class='money' type='text' readonly="readonly"  />
					</td>
				<tr id='overTimeSalary'>
					<td><label class='number'> Gross Pay </label> &nbsp;</td>
					<td >
					<input class='money' type='text' readonly="readonly"  />
					</td>
				</tr>
				<tr align='center'>
					<td colspan='3'>
					<input type='button' onclick='calculateSum()' value='Process PayCheck' />
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

nap0leon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

nap0leon

The HTML you posted says OT is based on working more than 40 hours in a week.
In your post you said OT was based on working more than 10 hours in a day.

I coded for the 40 hour workweek.
Let me know if you need it based on working longer than 10 in a day instead.
Or perhaps you need both... anything over 10 in one day is OT and anything over 40 altogether is OT.

e.g.,
if someone worked 12, 10, 10, 5, they would get 35 regular hours and 2 overtime.