Using Javascript with ASP.NET Form Elements

Adding simple pieces of Javascript to an Asp.net page can be acheived by adding to the attributes of the particular imagebutton or linkbutton, for example:

imgUpdate.Attributes.Add("onClick", "return confirm('Please confirm the Credit Card has been swiped');")

I recently had a requirement whereby I had a datagrid with checkbox to signify if the particular row was selected.  The number of selected rows affected the summation in a summary table.  Rather than doing a postback everytime one of these checkboxes was checked or unchecked I wanted to use Javascript to dynamically change the values in the table.

 

Quantity	0
Price (ea)	0
Total Due	0

Having coded using both Javascript and ASP in the past I expected to find the small totals table to looks something like the code below. 

 <TABLE style="BORDER-RIGHT: #547db4 thin solid; BORDER-TOP: #547db4 thin solid; BORDER-LEFT: #547db4 thin solid; BORDER-BOTTOM: #547db4 thin solid">
   <TR>
      <TD class=NormalBold>Quantity</TD>
      <TD class=Normal><asp:label id=lblBondQty Width="200px" runat="server" Visible="true">0</asp:label></TD>
   </TR>
   <TR>
       <TD class=NormalBold>Price (ea)</TD>
      <TD class=Normal><asp:label id=lblBondPrice Width="200px" runat="server" Visible="true">0</asp:label></TD>
   </TR>
   <TR>
      <TD class=NormalBold>Total Due</TD>
      <TD class=Normal><asp:label id=lblBondTotal Width="200px" runat="server" Visible="true">0</asp:label></TD>
   </TR>
</TABLE>

However ASP.NET sets out to make life difficult in this respect.  For example the row containing the label called lblBondQty now looks like

<TR>
   <TD class="NormalBold">Quantity</TD>
   <TD class="Normal">
      <span id="_ctl0__ctl0__ctl0_lblBondQty" style"width:200px;">0</span>
   </TD>
</TR>

in the browser window. ASP.NET had added additional code to the naming of the label, and changed it into a span.  I was also to discover that each item in the datagrid had a different name and so could not be accesed using the normal array mechanism.

For the datagrid I chose to add an OnChange event for each of the checkboxes, as below:

Private Sub dtgBeds_ItemDataBound(ByVal sender As Object, ByVal e As DataGridItemEventArgs) Handles dtgBeds.ItemDataBound
   Try
      If (e.Item.ItemType = ListItemType.Item) Or (e.Item.ItemType = ListItemType.AlternatingItem) Then
         Dim Active As CheckBox = CType(e.Item.FindControl("active"), CheckBox)
         Active.Attributes.Add("onClick", "return setBondVal(this);")
      End If
   Catch exc As Exception
      ProcessModuleLoadException(Me, exc)
   End Try
End Sub

This left the requirement for handling the unknown naming of the labels.  ASP.NET provides us with ClientID which can be used to unearth this value.  My client side javascript is shown below.  Note that I am using innerHtml to change the value of the label fields.

var bondQuantity = "<%= lblBondQty.ClientID %>";
var bondPrice = "<%= lblBondPrice.ClientID %>";
var bondTotal = "<%= lblBondTotal.ClientID %>";
function setBondVal(element){
   if (element.checked == true) {
       document.getElementById(bondQuantity).innerHTML = "" + (parseInt(document.getElementById(bondQuantity).innerHTML) + 1);
   }
    else {
      document.getElementById(bondQuantity).innerHTML = "" + (parseInt(document.getElementById(bondQuantity).innerHTML) - 1);
   }
   document.getElementById(bondTotal).innerHTML = "" + parseInt(document.getElementById(bondQuantity).innerHTML) * parseFloat(document.getElementById(bondPrice).innerHTML);
}