-
onBlue Javascript
I am trying to keep a running total by using the onBlue event of a text box. It is not working though, no errors. Here is my code, any thoughts?
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>IT Duties - Percentages</title>
</head>
<script language="JavaScript">
function total()
{
var total;
total = Number(total);
total = 0;
if(document.ITDuties.perc1.value != "")
{
v = document.ITDuties.perc1.value;
v = Number(v)
perc = perc + v;
}
if(document.ITDuties.perc2.value != "")
{
v = document.ITDuties.perc2.value;
v = Number(v)
perc = perc + v;
}
if(document.ITDuties.perc3.value != "")
{
v = document.ITDuties.perc3.value;
v = Number(v)
perc = perc + v;
}
if(document.ITDuties.perc4.value != "")
{
v = document.ITDuties.perc4.value;
v = Number(v)
perc = perc + v;
}
if(document.ITDuties.perc5.value != "")
{
v = document.ITDuties.perc5.value;
v = Number(v)
perc = perc + v;
}
if(document.ITDuties.perc6.value != "")
{
v = document.ITDuties.perc6.value;
v = Number(v)
perc = perc + v;
}
if(document.ITDuties.perc7.value != "")
{
v = document.ITDuties.perc7.value;
v = Number(v)
perc = perc + v;
}
if(document.ITDuties.perc8.value != "")
{
v = document.ITDuties.perc8.value;
v = Number(v)
perc = perc + v;
}
if(document.ITDuties.perc9.value != "")
{
v = document.ITDuties.perc9.value;
v = Number(v)
perc = perc + v;
}
if(document.ITDuties.perc10.value != "")
{
v = document.ITDuties.perc10.value;
v = Number(v)
perc = perc + v;
}
if(document.ITDuties.perc11.value != "")
{
v = document.ITDuties.perc11.value;
v = Number(v)
perc = perc + v;
}
if(document.ITDuties.perc12.value != "")
{
v = document.ITDuties.perc12.value;
v = Number(v)
perc = perc + v;
}
if(document.ITDuties.perc13.value != "")
{
v = document.ITDuties.perc13.value;
v = Number(v)
perc = perc + v;
}
if(document.ITDuties.perc14.value != "")
{
v = document.ITDuties.perc14.value;
v = Number(v)
perc = perc + v;
}
if(document.ITDuties.perc15.value != "")
{
v = document.ITDuties.perc15.value;
v = Number(v)
perc = perc + v;
}
if(document.ITDuties.perc16.value != "")
{
v = document.ITDuties.perc16.value;
v = Number(v)
perc = perc + v;
}
if(document.ITDuties.perc17.value != "")
{
v = document.ITDuties.perc17.value;
v = Number(v)
perc = perc + v;
}
if(document.ITDuties.perc18.value != "")
{
v = document.ITDuties.perc18.value;
v = Number(v)
perc = perc + v;
}
if(document.ITDuties.perc19.value != "")
{
v = document.ITDuties.perc19.value;
v = Number(v)
perc = perc + v;
}
if(document.ITDuties.perc20.value != "")
{
v = document.ITDuties.perc20.value;
v = Number(v)
perc = perc + v;
}
if(document.ITDuties.perc21.value != "")
{
v = document.ITDuties.perc21.value;
v = Number(v)
perc = perc + v;
}
total = perc
document.ITDuties.total.value = total;
}
function calc(form)
{
var perc;
perc = Number(perc);
perc = 0;
if(form.perc1.value != "")
{
v = form.perc1.value;
v = Number(v)
perc = perc + v;
}
if(form.perc2.value != "")
{
v = form.perc2.value;
v = Number(v)
perc = perc + v;
}
if(form.perc3.value != "")
{
v = form.perc3.value;
v = Number(v)
perc = perc + v;
}
if(form.perc4.value != "")
{
v = form.perc4.value;
v = Number(v)
perc = perc + v;
}
if(form.perc5.value != "")
{
v = form.perc5.value;
v = Number(v)
perc = perc + v;
}
if(form.perc6.value != "")
{
v = form.perc6.value;
v = Number(v)
perc = perc + v;
}
if(form.perc7.value != "")
{
v = form.perc7.value;
v = Number(v)
perc = perc + v;
}
if(form.perc8.value != "")
{
v = form.perc8.value;
v = Number(v)
perc = perc + v;
}
if(form.perc9.value != "")
{
v = form.perc9.value;
v = Number(v)
perc = perc + v;
}
if(form.perc10.value != "")
{
v = form.perc10.value;
v = Number(v)
perc = perc + v;
}
if(form.perc11.value != "")
{
v = form.perc11.value;
v = Number(v)
perc = perc + v;
}
if(form.perc12.value != "")
{
v = form.perc12.value;
v = Number(v)
perc = perc + v;
}
if(form.perc13.value != "")
{
v = form.perc13.value;
v = Number(v)
perc = perc + v;
}
if(form.perc14.value != "")
{
v = form.perc14.value;
v = Number(v)
perc = perc + v;
}
if(form.perc15.value != "")
{
v = form.perc15.value;
v = Number(v)
perc = perc + v;
}
if(form.perc16.value != "")
{
v = form.perc16.value;
v = Number(v)
perc = perc + v;
}
if(form.perc17.value != "")
{
v = form.perc17.value;
v = Number(v)
perc = perc + v;
}
if(form.perc18.value != "")
{
v = form.perc18.value;
v = Number(v)
perc = perc + v;
}
if(form.perc19.value != "")
{
v = form.perc19.value;
v = Number(v)
perc = perc + v;
}
if(form.perc20.value != "")
{
v = form.perc20.value;
v = Number(v)
perc = perc + v;
}
if(form.perc21.value != "")
{
v = form.perc21.value;
v = Number(v)
perc = perc + v;
}
if(perc < 100)
{
alert("The percentages are less than 100, please check your numbers and re-submit")
return false;
}
else if(perc > 100)
{
alert("The percentages are more than 100, please check your numbers and re-submit")
return false;
}
}
</script>
<body>
<h1><i> DSHS Regional Business Center Data Collection Tool</i></h1>
<h2><i> LAN and Desktop Information. </i></h2>
<h2><u>Monthly IT Duties in this office</u></h2>
<table border="1" align="right">
<tr>
<td align="right" bgcolor="gray">
<font color="white">Page 4 of 26
</td>
</tr>
</table>
<form action="wStations.asp" method="get" name="ITDuties" onSubmit="return(calc(this))">
<table>
<tr>
<td bgcolor="gray">
<font color=white>Main IT Duties in this office
</td>
<td bgcolor="gray">
<font color=white>Percentage of time (monthly) all IT Staff spend doing the checked function in this office. Make sure they add up to 100%
</td>
</tr>
<TR><Td><input type=checkbox name=17 value=17>Adding/Deleting New Users</td><Td><input type=text size=3 onBlur = "total()" name=perc17></tr><tr>
<td>
<input type="submit" name="OffInfo" value="Next">
<input type="hidden" name="locID" value="">
</td>
<td>
<input type="text" name="total" size="3"> Total
</td>
</tr>
</form>
</body>
</html>
</body>
</html>
-
There are a number of errors on that page. So many that troubleshooting is near impossible.
The errors I'd correct first are attribute values that are not quoted. It is confusing the browser.
-
I actually have corrected that. Honestly, I am not sure what other errors you may be referring to. I have a buddy on the case also, he is better at this than I and he is stumped as why its not working.
-
1) See your other thread.
2) You declare a variable called total but then use a variable called perc (in total()). perc is never declared or initialized.
3) A variable may not have the same name as a function.
4) The syntax document.form name.element name is absolutly not compatible. Use document.getElementByid("element id") instead. This means you must set the id attribute of all your input elements. This is easiest done by running this replacement regular expression in a text editor like EditPlus:
Replace: name="([^"]*)"
With: name="\1" id="\1"
5) Since you have so many percXX elements you might want to put that in a loop:
Code:
var tot = 0;
for(var i = 1; i <= 21; ++i) {
var v = document.getElementById("perc"+i).value;
tot += parseInt(v);
}
