verifying x number of fields total to be a specified field?

[PlanetK]

Hi there,

Can someone help me, please?

I have some code that specifies 5 hardcoded "detail" amount fields, then also allows (via javascript) an additional number of "detail" fields to be added. Any of the "detail" amount fields entered into MUST total another field called "Total Amount". Now I know you're saying... "why don't you just auto total the total amount for them?" Well, I don't want to do that, cuz I also want to force them to key in the total amount themselves, as well as the detail amount lines. Then, after they key in the total amount or the last detail amount, I want javascript to make sure the total of the "detail" lines does actually total the number they keyed into the "total" field. If the two numbers don't synch up, then I want it to give a pop-up error and clear the total field or something like that, so they can't continue until their detail fields equal their total field.

Here's my code for the total field and the detail fields:

<code>
<table border=1 cellspacing=0 cellpadding=2 bordercolorlight="##FFFFFF">
<tr>
<td bgcolor="##C0DCC0"><strong>Total Amount:</strong></td>
<td bgcolor="##C0DCC0">
$<input type="text" name="totalamount_ck" size=10>
</td>
</tr>
<td colspan=2 bgcolor="##C0DCC0"><strong>Detail:</strong>
<table border=1 cellspacing=0 cellpadding=2 bordercolorlight="##FFFFFF">
<tr><td><u>Amount</u></td>
<tr>
<td>$<input type="text" size=8 name="amountA_ck"></td>
</tr>
<tr>
<td>$<input type="text" size=8 name="amountB"></td>
</tr>
<tr>
<td>$<input type="text" size=8 name="amountC"></td>
</tr>
<tr>
<td>$<input type="text" size=8 name="amountD"></td>
</tr>
<tr>
<td>$<input type="text" size=8 name="amountE"></td>
</tr>
<SCRIPT>
function resizearea(obj){ if (obj.value.length > 0) { obj.rows = obj.value.length/40; } }

function rowadd(obj){
o="<TABLE border=1 cellspacing=0 cellpadding=2 bordercolorlight='##FFFFFF' width=100%>";
for (i=0;i<=obj.value-1;i++){
o+="<TR>";
o+="<td>$<input type='text' size=8 name='amount" + (i+1) + "'></td>";
o+="</TR>";
}
o+"</TABLE>";
document.all['categories'].innerHTML=o;
}
</SCRIPT>
<tr>
<TD colspan=4>
<font size=-1>How many additional detail lines would you like to add (if any)? <INPUT TYPE=text NAME='trows' STYLE='text-align:center;' VALUE='' SIZE=3 onBlur='rowadd(this);'><BR>
</font>
</TD>
</Tr>
<TR><TD COLSPAN=4><SPAN ID='categories'></SPAN></TD></TR>
</table>
</td>
</tr>
</table>
</code>

[Virbatem]

First you need to wrap the entire table in a form:

<form>
<table>
:
:
</table>
</form>

next edit the input tag:

$<input type="text" name="totalamount_ck" size=10 onblur="check(this.form);">

And in your javascript section add the appropriate function:

function check(frm)
{ n=0;
for(i=0;i<frm.elements.length;i++)
if(frm.elements[i].name.indexOf("amount")==0)
n+=frm.elements[i].value*1;
if(n!=frm.totalamount_ck.value)
alert("incorrect");
};

[PlanetK]

Thank you!! Weeeheeee! It works!

:D