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!

Register Log in
  • Congratulations SkipVought 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

countdrak

Programmer
Jun 20, 2003
358
0
0
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.
 
Sort by date Sort by votes
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.
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote

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>
 
Upvote 0 Downvote
This is awesome! Thank you 4345487 for the effort. Worked perfectly for me.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
171
xwb
xwb
penguinspeaks
  • Locked
  • Question
How do I pass a classic asp variable to JS
Replies
1
Views
219
xwb
xwb
jimoo
  • Locked
  • Question
How execute JS
Replies
3
Views
176
xwb
xwb
Mike Lewis
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid)
Replies
4
Views
256
Mike Lewis
Mike Lewis
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
121
rogerte
rogerte

Part and Inventory Search

Sponsor

Back
Top