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

itconsultant1Asked:
Who is Participating?
 
nap0leonConnect With a Mentor Commented:
Attached.
You have several fields without ids or names, and the ids on your table rows don't match up with the labels next to the fields... so I went by the labels that appear next to the fields as a guide for what value you wanted where.
pay-calculator.html
0
 
nap0leonCommented:
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.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.