Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

JS for adding number in text boxes and displaying a total 2

Status
Not open for further replies.

countdrak

Programmer
Jun 20, 2003
358
US
I have an html page which has a list of employees. The page displays employee hours in a TEXT FIELD for each day in a week.

So the page looks like this...

Code:
Employee Mon Tues Wed Thur Fri Sat Sun Total Assigned

Tom       5   5    5   5    5   0   0   25     25

Now I am trying to write a javascript that would display the sum total of everday under the TOTAL column. So in my text field if the user changes The hours on Monday from 5 to 7 the total should change at that moment to 27 without actually submitting the page.

Also if the Total becomes greater than assigned the TOTAL should appear in red.

IS this possible in javascript. I am very new to it and unsure of how this should be done? Can someone please help.
 
Thanks a lot! Yeah I need something similar, except only a SUM. How do I see the code? I can have the OnChange event on text fields.
 
If you click the "Download This Page" link at the bottom of the page you'll be able to download the code in a zip file, failing that right click the page and select "view source", you'll need to make quite a few changes to get it to do what you want it do.
 

Here is a litle sample to get you started you may want to validate that the input fields are numeric.

<html>
<head><title>Test</title>
<script>

function addToTotal()
{
var monTotal = parseInt(document.getElementById("mon").value, 10);
var tueTotal = parseInt(document.getElementById("tue").value, 10);
var wedTotal = parseInt(document.getElementById("wed").value, 10);
var thuTotal = parseInt(document.getElementById("thu").value, 10);
var friTotal = parseInt(document.getElementById("fri").value, 10);
var satTotal = parseInt(document.getElementById("sat").value, 10);
var sunTotal = parseInt(document.getElementById("sun").value, 10);
var assTotal = parseInt(document.getElementById("assigned").value, 10);

document.getElementById("total").value = monTotal + tueTotal + wedTotal + thuTotal + friTotal + satTotal + sunTotal
document.getElementById("total").readOnly = true;

/* if the total is greater then ssigned change color to red */
if(document.getElementById("total").value > assTotal)
{
document.getElementById("total").style.color= "red";
}
}

</script>
</head>

<form name="test" action="">

<table border="0">
<tr>
<th>Employee</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thur</th>
<th>Fri</th>
<th>Sat</th>
<th>Sun</th>
<th>Total</th>
<th>Assigned</th>
<tr>

<tr>
<td>Tom</td>
<td>
<input type="text" name="mon" id="mon" size="3" value="0" onChange="addToTotal();">
</td>

<td>
<input type="text" name="tue" id="tue" size="3" value="0" onChange="addToTotal();">
</td>

<td>
<input type="text" name="wed" id="wed" size="3" value="0" onChange="addToTotal();">
</td>

<td>
<input type="text" name="thu" id="thu" size="3" value="0" onChange="addToTotal();">
</td>

<td>
<input type="text" name="fri" id="fri" size="3" value="0" onChange="addToTotal();">
</td>

<td>
<input type="text" name="sat" id="sat" size="3" value="0" onChange="addToTotal();">
</td>

<td>
<input type="text" name="sun" id="sun" size="3" value="0" onChange="addToTotal();">
</td>

<td>
<input type="text" name="total" id="total" size="3" value="" onChange="addToTotal();">
</td>

<td>
<input type="text" name="assigned" id="assigned" size="3" value="25" onChange="addToTotal();">
</td>
</tr>
<tr><td>&nbsp;</td></tr>

</table>

</form>
</html>
 
This is awesome! Thank you 4345487 for the effort. Worked perfectly for me.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top