PDA

View Full Version : Perform calculations for multiple rows - onchange

golfer
07-18-2003, 11:46 PM
I need to be able to perform calculations on individual rows of data as an onchange event. The problem is that the field names being "updated" are identical. I do have a variable for each row that identifies the row, "ItemKey".

For example, if the user enters 10 into the Proposed_Increase for the 1st row, the NewSalary field automatically gets updated ... but only for that row.

See my code for the form below. I am clue-less on how to do this.

The onchange event should do this:

MyNewSalary = CurrentSalary+(CurrentSalary*PROPOSED_INCREASE)

Then put "MyNewSalary" into "NEWSALARY" field in the form.

There are other calculations I have to do on the row, but if I can figure out how to do this one for each row, it would be a start.

thanks in advance

<FORM ACTION="" METHOD="POST">
<TABLE>
<TR BGCOLOR="#FFFFFF" VALIGN="TOP">
<INPUT TYPE="hidden" NAME="ItemKey" VALUE="37492">
<INPUT TYPE="hidden" NAME="CurrentSalary" VALUE="46884600">
<INPUT TYPE="hidden" NAME="LocalMMP" VALUE="100000">
<TD>Doe</TD>
<TD>John</TD>
<TD>Jefe Ingenierķa Mina</TD>
<TD><INPUT TYPE="TEXT" SIZE="2" NAME="PERFORMANCE_RATING" MAXLENGTH="3"></TD>
<TD>100,000</TD>
<TD ALIGN="CENTER">CLP</TD>
<TD ALIGN="RIGHT">46,884,600</TD>
<TD><INPUT TYPE="TEXT" SIZE="2" NAME="PROPOSED_INCREASE" VALUE="" onchange="something();">%</TD>
<TD><INPUT TYPE="TEXT" SIZE="10" NAME="NEWSALARY" VALUE=""></TD>
<TD><INPUT TYPE="TEXT" SIZE="10" NAME="USDCONVERSION" VALUE=""></TD>
<TD><INPUT TYPE="TEXT" SIZE="2" NAME="NEWMMP" VALUE="">%</TD>
<TD ALIGN="CENTER"><INPUT TYPE="CHECKBOX" NAME="APPROVED_37492" VALUE="0"></TD></TR>
<TR BGCOLOR="#eeeeee" VALIGN="TOP">
<INPUT TYPE="hidden" NAME="ItemKey" VALUE="37516">
<INPUT TYPE="hidden" NAME="CurrentSalary" VALUE="42907800">
<INPUT TYPE="hidden" NAME="LocalMMP" VALUE="123456">
<TD>Smith</TD>
<TD>Fred</TD>
<TD>Senior Geologist</TD>
<TD><INPUT TYPE="TEXT" SIZE="2" NAME="PERFORMANCE_RATING" MAXLENGTH="3"></TD>
<TD>123,456</TD>
<TD ALIGN="CENTER">CLP</TD>
<TD ALIGN="RIGHT">42,907,800</TD>
<TD><INPUT TYPE="TEXT" SIZE="2" NAME="PROPOSED_INCREASE" VALUE="" onchange="something();">%</TD>
<TD><INPUT TYPE="TEXT" SIZE="10" NAME="NEWSALARY" VALUE=""></TD>
<TD><INPUT TYPE="TEXT" SIZE="10" NAME="USDCONVERSION" VALUE=""></TD>
<TD><INPUT TYPE="TEXT" SIZE="2" NAME="NEWMMP" VALUE="">%</TD>
<TD ALIGN="CENTER"><INPUT TYPE="CHECKBOX" NAME="APPROVED_37516" VALUE="0"></TD></TR>
</TABLE>
</FORM>
cheesebagpipe
07-20-2003, 12:34 AM
Here's one possibility. Getting a form element's index (Form.elements[n]) allows you to move around relatively in a row, without using names or other data. Problem is: every row needs to be set up the same...that's usually the way it is, but your form has two different (posted) arrangements. Hopefully that's not what you'll be using...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>untitled</title>
<script type="text/javascript" language="javascript">

function getIndex(oElement) {
var el, i = 0, oForm = oElement.form;
while (el = oForm.elements[i])
if (el == oElement)
return i;
else ++i;
return null;
}

function calcSalIncr(oText) {
var oForm = oText.form, idx = getIndex(oText);
if (!/^\d+$/.test(oText.value)) { //digits only
if (confirm('Please enter a valid percentage (1 - 100) here.')) {
oText.focus();
oText.select();
return false;
}
else { //leave me alone!
oText.value = '';
oForm.elements[idx + 1].value = '';
return true;
}
}
var proposed_increase = Number(oText.value) * .01;
var current_salary = Number(oForm.elements[idx + 6].value); //get CurrentSalary field & value
oForm.elements[idx + 1].value = current_salary + (current_salary * proposed_increase); //set NEWSALARY field
return true;
}

</script>
</head>
<body>
<FORM ACTION="" METHOD="POST">
<TABLE>
<TR BGCOLOR="#FFFFFF" VALIGN="TOP">
<TD>Doe</TD>
<TD>John</TD>
<TD>Jefe Ingenierķa Mina</TD>
<TD><INPUT TYPE="TEXT" SIZE="2" NAME="PERFORMANCE_RATING" MAXLENGTH="3"></TD>
<TD>100,000</TD>
<TD ALIGN="CENTER">CLP</TD>
<TD ALIGN="RIGHT">46,884,600</TD>
<TD><INPUT TYPE="TEXT" SIZE="2" NAME="PROPOSED_INCREASE" style="text-align:center;" onchange="return calcSalIncr(this)">%</TD>
<TD><INPUT TYPE="TEXT" SIZE="10" NAME="NEWSALARY" style="text-align:center;"></TD>
<TD><INPUT TYPE="TEXT" SIZE="10" NAME="USDCONVERSION" VALUE=""></TD>
<TD><INPUT TYPE="TEXT" SIZE="2" NAME="NEWMMP" VALUE="">%</TD>
<TD ALIGN="CENTER"><INPUT TYPE="CHECKBOX" NAME="APPROVED_37492" VALUE="0"></TD></TR>
<TR BGCOLOR="#eeeeee" VALIGN="TOP">
<INPUT TYPE="hidden" NAME="ItemKey" VALUE="37516">
<INPUT TYPE="hidden" NAME="CurrentSalary" VALUE="42907800">
<INPUT TYPE="hidden" NAME="LocalMMP" VALUE="123456">
<TD>Smith</TD>
<TD>Fred</TD>
<TD>Senior Geologist</TD>
<TD><INPUT TYPE="TEXT" SIZE="2" NAME="PERFORMANCE_RATING" MAXLENGTH="3"></TD>
<TD>123,456</TD>
<TD ALIGN="CENTER">CLP</TD>
<TD ALIGN="RIGHT">42,907,800</TD>
<TD><INPUT TYPE="TEXT" SIZE="2" NAME="PROPOSED_INCREASE" VALUE="" onchange="return calcSalIncr(this)">%</TD>
<TD><INPUT TYPE="TEXT" SIZE="10" NAME="NEWSALARY" VALUE=""></TD>
<TD><INPUT TYPE="TEXT" SIZE="10" NAME="USDCONVERSION" VALUE=""></TD>
<TD><INPUT TYPE="TEXT" SIZE="2" NAME="NEWMMP" VALUE="">%</TD>
<TD ALIGN="CENTER"><INPUT TYPE="CHECKBOX" NAME="APPROVED_37516" VALUE="0"></TD>
</TR>
</TABLE>
</FORM>
</body>
</html>