Client side with ASP.NET 1

[Isadore]

Recently Paul (link9) and I discussed the use of Javascript for Client side calculations when the User enters a required variable. I am submitting this example for those who need to impliment client side calculations - it is based on indexing the object in ASP.NET and adding an "OnKeyUp" or "OnChange" attribute to the asp:textbox.

Physically the objects involved are located in the following order within the form:

Water Temperature (txtWaterTemp)
pH: textbox (txtpH) (not involved in caculation)
Measured Oxygen: textbox (txtOxy)
% Oxygen saturation: textbox (txtOxygen)

...so the idea here is to (1) enter a "Measured Oxygen", (2) use the Water Temperature and Measured Oxygen to calculate an instant result on the client side using JavaScript, and place this calculated result in the txtOxygen asp:textbox.

The equation (% Oxygen Sat) used here is defined as:

Z = 14.407 + (0.0035 * Tw^2 - 0.3369 * Tw

where Tw is our measured water temperature; and the % Oxygen saturation, which we need to calculate on the Client side, is defined as:

% Sat = [txtOxy]/Z

...so two variables on the form needed for this client side calculation.

In the code behind or vb script area:

txtOxy.attributes.add("OnKeyUp","calculateOxy(this);&quot

..and in the HTML Javascript section put:

<script=javascript>
function calculateOxy(obj){
var i, index;
for(i=0;i<document.forms[0].length;i++){
if(document.forms[0].elements[i ].name==obj.name)
index=i;
}
var tempfactor;
tempfactor = 0.0035 * document.forms[0].elements[index-2].value^2;
var tempBfactor;
tempBfactor = -.3369 * document.forms[0].elements[index-2].value;
var DO;
DO = document.forms[0].elements[index].value;
var Denom;
Denom = 14.407 + tempfactor + tempBfactor;
var calculatedValue;
calculatedValue = (AvgDO/Denom) * 100;
document.forms[0].elements[index+1].value=calculatedValue;
}
</script>

...keeping in mind that the [index] value is the textbox with the added attribute, the other objects having [index-2] or [index+1]; depending on their relative location to the indexed object.

Lots can done here, and thanks to Paul (link9) we have the beginnings of a very friendly Javascript-ASP.NET protocol. Also note the extra space in the [i ] syntax above (to prevent italics from coming on!).

One nice contribution to this would be to prevent the focus from &quot;arriving&quot; at the calculated textbox - not necessary, and so adds an additional step -- if anyone out there knows how to direct the focus I'd appreciate that routine.

 

[link9]

To set the focus on a particular element, just:

document.forms[0].elements[index + n].focus();

Isadore, you should FAQ this so it doesn't get lost in the shuffle of everyday posting.


paul

 

[Isadore]

Ok will do thanks Paul. Been doing some nice things lately, e.g., tonite was able to connect once in a table, use a datareader to fill several arrays at once, put them in cache and use them for a single page with 8 separate graphs, each graph picking up the specified array it needs on the Server cache. I really like this cache business -- working well...