...

View Full Version : adding together of input boxes



karm
12-29-2009, 04:57 PM
Hi there!

Basically i am creating a webpage for staff rotas that can then be printed out but i need to know the code to add the values of input boxes together then display the results.

For example
...........Monday......Tuesday....Wednesday...Thursday..Friday....Hrs worked
John:........4............5...............7....................7........2

Calculate

So i want the boxes for monday, tuesday, wednesday, thursday and friday added together upon clicking of the calculate button then displayed in the hrs worked box, very much like an excel page.

Is this possible?

Thankyou!

harrierdh
12-29-2009, 09:44 PM
Here is one way.


<script>
function calculate() {

var sun = document.getElementById("sun").value;
var mon = document.getElementById("mon").value;
var tue = document.getElementById("tue").value;
var wed = document.getElementById("wed").value;
var thu = document.getElementById("thu").value;
var fri = document.getElementById("fri").value;
var sat = document.getElementById("sat").value;
if (isNumeric(sun, false)) {
sun = parseInt(sun);
} else {
sun = 0;
}
if (isNumeric(mon, false)) {
mon = parseInt(mon);
} else {
mon = 0;
}
if (isNumeric(tue, false)) {
tue = parseInt(tue);
} else {
tue = 0;
}
if (isNumeric(wed, false)) {
wed = parseInt(wed);
} else {
wed = 0;
}
if (isNumeric(thu, false)) {
thu = parseInt(thu);
} else {
thu = 0;
}
if (isNumeric(fri, false)) {
fri = parseInt(fri);
} else {
fri = 0;
}
if (isNumeric(sat, false)) {
sat = parseInt(sat);
} else {
sat = 0;
}

var total = sun + mon + tue + wed + thu + fri + sat;
alert(total);
}

function isNumeric(sText, decimalAllowed) {
if (sText.length == 0) return false;
var validChars = "";
if (decimalAllowed) {
validChars = "0123456789.";
} else {
validChars = "0123456789";
}
var isNumber = true;
var charA;
var decimalCount = 0;
for (i = 0; i < sText.length && isNumber == true && decimalCount < 2; i++) {
charA = sText.charAt(i);
if (charA == ".") {
decimalCount += 1;
}
if (validChars.indexOf(charA) == -1) {
isNumber = false;
}
}
return isNumber;
}
</script>

<input type="text" id="sun" name="sun" size="2" />
<input type="text" id="mon" name="mon" size="2" />
<input type="text" id="tue" name="tue" size="2" />
<input type="text" id="wed" name="wed" size="2" />
<input type="text" id="thu" name="thu" size="2" />
<input type="text" id="fri" name="fri" size="2" />
<input type="text" id="sat" name="sat" size="2" />
<input type="button" id="button" name="button" value="Calculate" onMouseDown="calculate()" />

jonweb2009
12-29-2009, 09:47 PM
<!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>
<script type="text/javascript" language="javascript">
function Calculate()

{

var monday=document.form2.monday.value;
var tuesday=document.form2.tuesday.value;
var wednesday=document.form2.wednesday.value;
var thursday=document.form2.thursday.value;
var friday=document.form2.friday.value;
var saturday=document.form2.saturday.value;
var sunday=document.form2.sunday.value;

var total;

total = parseInt(monday) + parseInt(tuesday) + parseInt(wednesday) + parseInt(thursday) + parseInt(friday) + parseInt(saturday) + parseInt(sunday) ;

document.form2.result.value = total;

return false;

}

</script>

</head>
<body>

<form id="form2" name="form2" method="post" action="#" onsubmit="return Calculate();">
<table width="700" border="0" align="center" cellpadding="3" cellspacing="0">

<tr>
<td align="center" valign="middle"></td>
<td height="40" align="center" valign="middle">MONDAY</td>
<td align="center" valign="middle">TUESDAY</td>
<td align="center" valign="middle">WEDNESDAY</td>
<td align="center" valign="middle">THURSDAY</td>
<td align="center" valign="middle">FRIDAY</td>
<td align="center" valign="middle">SATURDAY</td>
<td align="center" valign="middle">SUNDAY</td>
<td align="center" valign="middle">TOTAL HOURS</td>
</tr>
<tr>
<td width="18%" align="center" valign="middle">John </td>
<td width="41%" height="40" align="center" valign="middle"><input name="monday" type="text" id="monday" size="10" /></td>
<td width="41%" align="center" valign="middle"><input name="tuesday" type="text" id="tuesday" size="10" /></td>
<td width="82%" align="center" valign="middle"><input name="wednesday" type="text" id="wednesday" size="10" /></td>
<td width="82%" align="center" valign="middle"><input name="thursday" type="text" id="thursday" size="10" /></td>
<td width="82%" align="center" valign="middle"><input name="friday" type="text" id="friday" size="10" /></td>
<td width="82%" align="center" valign="middle"><input name="saturday" type="text" id="saturday" size="10" /></td>
<td width="82%" align="center" valign="middle"><input name="sunday" type="text" id="sunday" size="10" /></td>
<td width="82%" align="center" valign="middle"><input name="result" type="text" id="result" size="10" /></td>
</tr>


<tr>
<td>&nbsp;</td>
<td colspan="8" align="left" valign="middle">
<input type="submit" name="button" id="button" value="Calculate" /></td>
</tr>
</table>
</form>

</body>
</html>


TRY THIS



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum