Question

Could you please help why my working wage calculating function doesn’t work in this code? (It worked fine before I add “Do while” loop into. )

What I want is first retrieve wage amount from database after that user can input other expense and remunerate right to each generated records. When user got the satisfy outcome, he can save this back into database.

Thank you,

My code are as below:

<%
Do while Not Rs.EOF

if rs.fields.item("if_social_sec") = "True"  then
    displaytxt = "" 
    soc_sec_v = soc_sec
else
    displaytxt = "none"
    soc_sec_v = 0
end if 
%>

<table>
<form name="myform2" action="salary_action.asp" method="POST">

<tr bgcolor="#<%=color%>"> 
<td class="btline" width="25" align="center"><input type="checkbox" name="lb_id" value="<%=lb_id%>" onClick="highlightRow(this,'#FFFFCC','#EFF4FA');"></td>
<td class="btline difcursor" nowrap  width="7%">&nbsp;<%=rs.fields.item("lb_name")%></td>
<td class="btline"  nowrap  width="10%"><input type="text" name="working_day" id="working_day" value="<%=rs.fields.item("MaxOfdays")%>" size="7" onFocus="startCalc();" onBlur="stopCalc();"></td>
<td class="btline "  nowrap width="10%"><input type="text" name="wage" id="wage" value="<%=formatnumber(rs.fields.item("Total"),2)%>" onFocus="startCalc();" onBlur="stopCalc();"></td>
<td class="btline "  nowrap  width="8%"><input type="text" name="OT" id="OT" size="7" onFocus="startCalc();" onBlur="stopCalc();"><input type="hidden" id="OT_rate" value="<%=rs.fields.item("lbOT")%>" ></td>
<td class="btline " nowrap  width="8%"  ><input type="text" name="soc_sec" id="soc_sec" size="7" value="<%=soc_sec_v%>" onFocus="startCalc();" onBlur="stopCalc();"></td>
<td class="btline" nowrap style="padding-left: 10px" width="8%" ><input type="text" name="ex_pay" id="ex_pay" size="7" onFocus="startCalc();" onBlur="stopCalc();"></td>
<td class="btline bold" width="10%"><input type="text" name="net_wage" id="net_wage" size="7"  disabled></td>
<td class="btline"   ><input type="submit"></td>

</tr>

</form>
<%
        Rs.movenext
        n = n + 1       
    Loop
End if
Rs.close

set Rs=nothing
Call DBConnClose()
%>
</table>


<script>
function startCalc(){ 
  interval = setInterval("calc()",1);
}
function calc(){

  wage = document.myform2.wage.value;
  OT_rate = document.myform2.OT_rate.value;
  OT = document.myform2.OT.value; 
     OT_amt = OT_rate * OT;
  soc_sec = document.myform2.soc_sec.value; 
  ex_pay= document.myform2.ex_pay.value; 
  net_wage = (wage * 1) + (OT_amt * 1) - (soc_sec * 1) + (ex_pay * 1);

  document.myform2.net_wage.value = net_wage.toFixed(2);
}

function stopCalc(){
  clearInterval(interval);
}
</script>

Answer 1

The problem is that for every record in the database table, you are creating a separate form and all forms have the same name thus JavaScript can’t find the actual form when it’s executed.

Assuming you want to keep this behavior (of one form for every record) you first have to give unique name to each form by adding some counter,which you already have:

<form name="myform2_<%=n%>" action="salary_action.asp" method="POST">

By adding the counter n you create unique name to each of the forms.

Next step is changing the way you call the functions, you need to tell the JavaScript function who called it so it can grab the proper form. To do this, change the calls to:

onFocus="startCalc(this);" onBlur="stopCalc(this);"

The this is reserved JavaScript identifier and when passed this way it will be the actual element being focused or blurred.

Final step is modifying the JavaScript itself – you will need multiple intervals now, one for each form, so associative array is the most simple solution, having the form name as the key. Code would look like:

var intervals = {};
function startCalc(sender){ 
  var key = sender.form.name;
  intervals[key] = setInterval(function() {
    calc(key);
  },1);
}
function calc(key){
  var oForm = document.forms[key];
  wage = oForm.wage.value;
  OT_rate = oForm.OT_rate.value;
  OT = oForm.OT.value; 
  OT_amt = OT_rate * OT;
  soc_sec = oForm.soc_sec.value; 
  ex_pay= oForm.ex_pay.value; 
  net_wage = (wage * 1) + (OT_amt * 1) - (soc_sec * 1) + (ex_pay * 1);

  oForm.net_wage.value = net_wage.toFixed(2);
}

function stopCalc(sender){
  var key = sender.form.name;
  clearInterval(intervals[key]);
}

As you see, the form name is now being extracted from the “sender” element then used to get the actual form instead of the single “myform2” which no longer exists as you have multiple forms.