Using JavaScript with Form Elements

Adding simple pieces of JavaScript to an Asp.net page can be achieved by adding 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 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 every time 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 accessed using the normal array mechanism.

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

PrivateSub dtgBeds_ItemDataBound(ByVal sender AsObject, 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);")
      EndIf
   Catch exc As Exception
ProcessModuleLoadException(Me, exc)
   EndTry
EndSub

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);
}

By referencing the unique ClientId the unique reference for an ASP.Net form element can be derived for use by JavaScript.