...
PDA

Problem with onchange

Kevin 101
01-28-2005, 01:22 PM
Hi

I've built a form and I want to have the totals add up automatically depending on the users input. I've been round the houses trying to get the Total fields to add up with the 'onChange' tag in each field but keep getting NaN error;

<code>



<head>



<SCRIPT LANGUAGE=JavaScript>




<!-- hide this script from old browsers

function temp(form)
{
var a = parseFloat(form.Monday_1.value);
var b = parseFloat(form.Monday_2.value);
var c = parseFloat(form.Monday_3.value);
var d = parseFloat(form.Monday_4.value);
var e = parseFloat(form.Monday_5.value);
form.Monday_Total.value = eval(a + b + c + d + e);
}
// done hiding from old browsers -->

</script>


</head>


<body>


<center><h2><b>Overtime Payment Authorisation</b></h2></center>
<br><br>
<form method="post" action="../../cgi-bin/Overtime/Overtime.cgi">

<table width="75%" border="2" cellpadding="2" cellspacing="2" align="center">
<tr>
<tr><td width="50%" bgcolor="#e8e8e8">Month</td><td><input type="text" size="20" name="Month"></td><td rowspan="7" bgcolor="#e8e8e8">Reason for overtime</td><td rowspan="7"><textarea name="Reason_For_Overtime" rows=10 cols=70 wrap="VIRTUAL"></textarea></td>
<tr><td bgcolor="#e8e8e8">Name</td><td><input type="text" size="20" name="Name"></td>
<tr><td bgcolor="#e8e8e8">Sun ID</td><td><input type="text" size="20" name="Sun_ID"></td>
<tr><td bgcolor="#e8e8e8">eMail</td><td><input type="text" size="20" name="eMail"></td>
<tr><td bgcolor="#e8e8e8">Manager eMail</td><td><input type="text" size="20" name="Manager_eMail"></td>
<tr><td bgcolor="#e8e8e8">Date (DD/MM/YY)</td><td><input type="text" size="20" name="Date"></td>
</table>
<br><br>
<br><br>
<table width="75%" border="2" cellpadding="2" cellspacing="2" align="center">
<tr><td bgcolor="#e8e8e8"><B>Claim (Hours)</b></td></tr>
</table>
<br><br>
<table width="75%" border="2" cellpadding="2" cellspacing="2" align="center">
<tr bgcolor="#e8e8e8" align="center"><td>Week Commencing</td>

<td align="center">Monday</td>
<td align="center">Tuesday</td>
<td align="center">Wednesday</td>
<td align="center">Thursday</td>
<td align="center">Friday</td>
<td align="center">Saturday</td>
<td align="center">Sunday</td></tr>

<td align="center"><input type="text" size="20" name="Week_Commencing1"></td>
<td align="center"><input type="text" size="10" name="Monday_1" onChange="temp(form)"></td>
<td align="center"><input type="text" size="10" name="Tuesday_1" onChange="temp(form)"></td>
<td align="center"><input type="text" size="10" name="Wednesday_1" onChange="temp(form)"></td>
<td align="center"><input type="text" size="10" name="Thursday_1" onChange="temp(form)"></td>
<td align="center"><input type="text" size="10" name="Friday_1" onChange="temp(form)"></td>
<td align="center"><input type="text" size="10" name="Saturday_1" onChange="temp(form)"></td>
<td align="center"><input type="text" size="10" name="Sunday_1" onChange="temp(form)"></td></tr>



<td align="center"><input type="text" size="20" name="Week_Commencing2"></td>
<td align="center"><input type="text" size="10" name="Monday_2" onChange="temp(form)"></td>
<td align="center"><input type="text" size="10" name="Tuesday_2" onChange="temp(form)"></td>
<td align="center"><input type="text" size="10" name="Wednesday_2" onChange="temp(form)"></td>
<td align="center"><input type="text" size="10" name="Thursday_2" onChange="temp(form)"></td>
<td align="center"><input type="text" size="10" name="Friday_2" onChange="temp(form)"></td>
<td align="center"><input type="text" size="10" name="Saturday_2" onChange="temp(form)"></td>
<td align="center"><input type="text" size="10" name="Sunday_2" onChange="temp(form)"></td></tr>



<td align="center"><input type="text" size="20" name="Week_Commencing3"></td>
<td align="center"><input type="text" size="10" name="Monday_3" onChange="temp(form)"></td>
<td align="center"><input type="text" size="10" name="Tuesday_3" onChange="temp(form)"></td>
<td align="center"><input type="text" size="10" name="Wednesday_3" onChange="temp(form)"></td>
<td align="center"><input type="text" size="10" name="Thursday_3" onChange="temp(form)"></td>
<td align="center"><input type="text" size="10" name="Friday_3" onChange="temp(form)"></td>
<td align="center"><input type="text" size="10" name="Saturday_3" onChange="temp(form)"></td>
<td align="center"><input type="text" size="10" name="Sunday_3" onChange="temp(form)"></td></tr>



<td align="center"><input type="text" size="20" name="Week_Commencing4"></td>
<td align="center"><input type="text" size="10" name="Monday_4" onChange="temp(form)"></td>
<td align="center"><input type="text" size="10" name="Tuesday_4" onChange="temp(form)"></td>
<td align="center"><input type="text" size="10" name="Wednesday_4" onChange="temp(form)"></td>
<td align="center"><input type="text" size="10" name="Thursday_4" onChange="temp(form)"></td>
<td align="center"><input type="text" size="10" name="Friday_4" onChange="temp(form)"></td>
<td align="center"><input type="text" size="10" name="Saturday_4" onChange="temp(form)"></td>
<td align="center"><input type="text" size="10" name="Sunday_4" onChange="temp(form)"></td></tr>


<td align="center"><input type="text" size="20" name="Week_Commencing5"></td>
<td align="center"><input type="text" size="10" name="Monday_5" onChange="temp(form)"></td>
<td align="center"><input type="text" size="10" name="Tuesday_5" onChange="temp(form)"></td>
<td align="center"><input type="text" size="10" name="Wednesday_5" onChange="temp(form)"></td>
<td align="center"><input type="text" size="10" name="Thursday_5" onChange="temp(form)"></td>
<td align="center"><input type="text" size="10" name="Friday_5" onChange="temp(form)"></td>
<td align="center"><input type="text" size="10" name="Saturday_5" onChange="temp(form)"></td>
<td align="center"><input type="text" size="10" name="Sunday_5" onChange="temp(form)"></td></tr>




<tr bgcolor="#e8e8e8" align="center"><td>Totals</td>
<td><input type="text" size="10" name="Monday_Total"></td>
<td><input type="text" size="10" name="Tuesday_Total"></td>
<td><input type="text" size="10" name="Wednesday_Total"></td>
<td><input type="text" size="10" name="Thursday_Total"></td>
<td><input type="text" size="10" name="Friday_Total"></td>
<td><input type="text" size="10" name="Saturday_Total"></td>
<td><input type="text" size="10" name="Sunday_Total"></td></tr>

<tr><td colspan="8" bgcolor="#e8e8e8"><b>I, the above named certify that I have worked the hours claimed above. I understand that it is a <a href="http://hrweb.uk/Policies/Disciplinary_Procedure.html">disciplinary issue</a> to claim hours not worked</b></td></tr>
</table>
<br><br>
<table align="center" width="75%">
<tr>
<td align="center" colspan="2"><input type="submit" value="Submit">&nbsp;&nbsp;<input type="reset" value="Clear Form"></td>
</tr>
</table>
</form>

<br><br>
<br><br>



</body>


</code>

Any ideas?? it's driving me up the wall!!!

Thanks


Kevin
Kor
01-28-2005, 01:54 PM
onChange="temp(this.form)"

and


function temp(f)
{
var total=0;
var nr =5;//nr of textfield whose values are to be add
for(var i=1;i<nr+1;i++){
total = total + parseFloat(f.elements['Monday_'+i].value*1);
}
f.elements['Monday_Total'].value = total;
}
Kevin 101
01-28-2005, 02:06 PM
works perfectly, thanks for the quick response!

Ta very much!
Mr J
01-28-2005, 05:40 PM
The following will give the totals of each day



days=new Array("Monday_","Tuesday_","Wednesday_","Thursday_","Friday_","Saturday_","Sunday_")
function temp(f){

for(i=0;i<7;i++){
total=0

for(j=1;j<6;j++){
total+=f.elements[days[i]+j].value*1
}

f.elements[days[i]+"Total"].value=total
}
}

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum