INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

ASP.NET 101

Client side ASP.NET + Javascript examples by Isadore
Posted: 7 Aug 02 (Edited 24 Jun 07)

Examples of JavaScript application in ASP.NET pages

Method 1: Indexing objects

For this example the objects involved are located in the following order on 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 value, (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);")

..and in the HTML Javascript section put:

CODE

<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.


Method 2: Directly identifying objects

Using the javascript call for a value within an object:

CODE

...
document.Form1.txtmyText.value
...

...one can obtain immediately the value.

The following example shows how this is done (a calculation of Oxygen Saturation based on Salinity and Water Temperature).

Note how the Javascript variables are multiplied by 1 to assure their numeric typing.

CODE

function calculateOxyA(obj){
        if(document.frmCDE.txtWaterTemp.value*1 < 0.01){
          alert('Make a note in the comments that no water temperature reported for this sample');
          document.frmCDE.txtWaterTemp.value = -1
          }
          if(document.frmCDE.txtAvgDO.value*1 < 0.01){
             var y = document.frmCDE.txtRep1.value*1
             y = y.toDec(2);
            document.frmCDE.txtAvgDO.value = y*1;
           }
           else{             
             var z =  (0.5*((document.frmCDE.txtRep1.value*1)+(document.frmCDE.txtRep2.value*1)));
             z = z.toDec(2);
             document.frmCDE.txtAvgDO.value = z*1;
          }
          var AvgDO = document.frmCDE.txtAvgDO.value*1
          var T = document.frmCDE.txtWaterTemp.value*1
          T = T*1 + 273.15
          var x = (157570.1/T)*1
          var y = - (66423080/(T*T))*1
          var z = (12438000000/(T*T*T))*1
          var zz = - (862194900000/(T*T*T*T))*1
          var sal = document.frmCDE.txtSalinity.value*1
          var sala =  0.017674 - (10.754/T)*1
          var salb =  (2140.7/(T*T))*1
          var salc = sal*1*((sala*1)+(salb*1))
          var zzz = Math.exp(-139.34411 + x*1 + y*1 + z*1 + zz*1- salc*1);
          var y = (AvgDO*1/zzz*1)*100
          y = y.toDec(2);     [Note: y.toFixed(2); may be equivalent]
         document.frmCDE.txtSat.value = y*1;
       }

  ...where Math.exp represents the Natural log (e to the power of) and "y.toDec(2)" is a simple Java statement required to convert the variable to a formatted 2 decimal number.

        '********************************************'

The following code uses hidden textboxes to store JavaScript variables (QueryString) to set the stage to pass on the client side to one of two aspx pages.

The form consist of two textboxes and two option button:

CODE

<Script LANGUAGE="JavaScript" TYPE="text/javascript">
     <!--
       function chng(){
         if (frmWS.r2.checked){            
          frmWS.txtA.value="0";
          frmWS.r1.checked=false;
          frmWS.strURL.value = "Groupsdata.aspx?ChartID=1"
         }
         else{
          frmWS.txtA.value="1";
          frmWS.r2.checked=false;
          frmWS.strURL.value = "WSDataMap.aspx?ChartID=1"
         }
}       
-->
</script>

<html>
...
...option buttons...
<p align="center"><i><Font Size="4" color="navy"><input type=radio id="r1" runat="server" onclick="Javascript:chng();">Search by Map
<input type=radio id="r2" runat="server" onclick="Javascript:chng();">Search by DataGrid</Font></i></p>
...
...hiddent input textboxes...
<input type="Text" id="txtA" runat="server"  Value="0">
<input type="Text" id="strURL" runat="server" Value="Groupsdata.aspx?ChartID=1">
...
...
</html>

Another useful routine is to build a URL within the javascript function by passing variables within textboxes or ViewState.

CODE

function sF(intF){
  var url = frmWS.strURL.value;
  var index = frmWS.txtV.value;
  url += index;
  navigate(url + '&WID=' +intF);         
}

which is useful to collect client side data and then redirect the aspx page.

The following routine picks up both values and text from a listbox, along with two variables and redirects the user to new page based on an option button selection:

CODE

function getStr(str, strC){
  var s="";
  var r="";
  var opt;
  var el;
    for (var i=0;i<document.Form1.lstCon.length;i++) {
      if(document.Form1.lstCon.options[i].selected){
       s+=document.Form1.lstCon.options[i].value+((i==document.Form1.lstCon.length-1)?"":",");
       r+=document.Form1.lstCon.options[i].text+((i==document.Form1.lstCon.length-1)?"":",");
      }
    }
  document.Form1.alloptions.value=s;
  document.Form1.allNoptions.value=r;
  document.Form1.dteTime.value = document.Form1.ddhr.options[document.Form1.ddhr.selectedIndex].text + ":" + document.Form1.ddmin.options[document.Form1.ddmin.selectedIndex].text;
  if(document.Form1.radchem.checked==true){
    el = "ChemDataEntry.aspx?mypage=8&filter=" + document.Form1.txtfilter.value + "&Description=" + str + "&GroupAbbrev=" + strC;
  }
  if(document.Form1.radbac.checked==true){
    el = "BacDataEntry.aspx?mypage=8&filter=" + document.Form1.txtfilter.value + "&Description=" + str + "&GroupAbbrev=" + strC;
  }
  if(document.Form1.radbio.checked==true){
    el = "BioDataEntry.aspx?mypage=8&filter=" + document.Form1.txtfilter.value + "&Description=" + str + "&GroupAbbrev=" + strC;
  }
  if(document.Form1.radparam.checked==true){
    el = "SixParams.aspx?mypage=8&filter=" + document.Form1.txtfilter.value + "&Description=" + str + "&GroupAbbrev=" + strC;
  }
  navigate(el);
}

Related Topics:

thread855-1300079: Capturing grid value with Javascript : Capturing Datagrid column,row values.
thread855-1075214: Referencing values in html form or java script in code behind : Using JavaScript in Code behind.
thread855-1094226: Javascript inside a datgrid : Adding JavaScript to dd & dg On ItemDataBind
thread855-1102869: Client Javascript to sum up a datagrid based on a checkbox : Summing Checkboxes in a dg using JS
thread855-296976: Make the mouse pointer an hourglass  : Nice Review of JS in a User Control
thread855-945984: Javascript in code-behind problem  : Excellent discussion on the use of JS & Codebehind
thread216-1149610: Using confirm() with ASP.NET : Using Confirm() pop-ups to detect changes on a form handling Postback events
thread855-1050604: Javascript DIV and visibility style : Using Div to hide HTML objects
thread855-884138: Calling client-sdie vbscript function in server control  : Adding vbScript in dg during databinding
thread855-1153751: Execute VB.NET Function from JavaScript Function : Invoking Server Side Code with Javascript
thread855-763674: Two ListBoxes dynamically populated w/JavaScript  : Storing listbox selected values in Javascript

Back to Microsoft: ASP.NET FAQ Index
Back to Microsoft: ASP.NET Forum

My Archive

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close