Get an asp.net Label control using javascript

Question

I have a label control with in a form view that displays the sum of few textboxes. I am not able to get the id of label tb_TA_2_6 in java script.

i tried

<script type ="text/jscript" language= "javascript" >
 function autosum(t1, t2) {
var sum;
var a = document.getElementById('tb_TA_2_6'); // does not work
var b = FindControl(FormView1, t2); // does not work
var c = <%= 'tb_TA_2_6'.ClientID%>; // unknown component tb_TA_2_6
var c = <%= tb_TA_2_6.ClientID%>; //The name 'tb_TA_2_6' does not exist in the current context

var num2 = $(t2);
    if (num2.textContent)
        sum = num2.textContent;
    else if (num2.innerText)
        sum = num2.innerText;
    else
        sum = num2.innerHTML;
 }

function FindControl(parentControl, strId)
    {
        var returnObject;
        for(i=0;i < parentControl.elements.length; i++)
        {
            if(parentControl.elements[i].id.indexOf(strId) >= 0)
                returnObject = parentControl.elements[i];
            else if(parentControl.elements[i].hasChildNodes())
                returnObject = FindControl(parentControl.elements[i],strId);

            if(returnObject != null) 
            {   //if object is found return
                return returnObject;
            }
        }
        return returnObject;
    }
 </script>        

but none of it seems to work, does anyone has an idea what's going on with the label with id tb_TA_2_6.

The form view looks like

<asp:FormView ID="FormView1" runat="server" ClientIDMode="Static">
<ItemTemplate>
    <asp:Label ID="labelID" runat="server" Text='<%#Bind("ID") %>' Visible="false"></asp:Label>
    <table id="table1">
        <tr>
            <td>
                <span > Textbox1 </span>
            </td>
            <td>
                <asp:TextBox ID="tb_TA_2_4" onBlur="Javascript:autosum(this, '<%= tb_TA_2_6.ClientID%>');"  runat="server"  Text='<%#Bind("question6i","{0:$#,#0.00}") %>'></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
                <span>6. (iii) Total Value  </span>
            </td>
            <td>
                <asp:Label ID="tb_TA_2_6" runat="server" ReadOnly="true" Text='<%#Bind("question6iii", "{0:$#,#0.00}") %>'  OnPreRender="FormView1_PreRender" ></asp:Label>
            </td>
        </tr>
    </table>
</ItemTemplate>

html rendered is like following, I removed the style information in my question.

<tr>

                    <td style="vertical-align: middle; width: 697px; height: 15px; border-style: solid;

                        border-color: #6699cc; border-width: 1px; border-top: 1px solid #fff;">

                        <span style="font-family: MS Sans Serif; font-size: 14px; color: #000000">6. (iii) Total

                            Value of All Benefits For Payment of Utilities </span>

                    </td>

                    <td class="alignright" style="vertical-align: top; width: 157px; height: 15px; border-style: solid;

                        border-color: #6699cc; border-width: 1px; border-left: 1px solid #fff; border-top: 1px solid #fff;">

                        <span id="ctl00_cph_Main_FormView1_tb_TA_2_6" ReadOnly="true" style="font-size:12pt;">$60.00</span>

                    </td>

                </tr>

Answer 1

As we can see your ASP.NET Label with ID "tb_TA_2_6" renders as a span element with ID "ctl00_cph_Main_FormView1_tb_TA_2_6".

document.getElementById('ctl00_cph_Main_FormView1_tb_TA_2_6') would then select the element.

You should also know that your label is created within a ItemTemplate in your FormView and that it most likely renders multiple items. This is why you can´t access tb_TA_2_6.ClientID.

Now, which item do you want your Javascipt to select the span element from?

UPDATE

It looks like you´re trying to create a table and summarize some value from each row. Here we go;

ASP.NET UserControl

<table id="myTable">
<asp:FormView ID="FormView1" runat="server">
<ItemTemplate>
    <tr>
        <td><span>Textbox1</span></td>
        <td><asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("question6i", "{0:$#,#0.00}") %>' class="myValue" /></td>
    </tr>
</ItemTemplate>
</asp:FormView>

    <tr>
        <td><span>6. (iii) Total Value</span></td>
        <td><asp:Label ID="TextBox1SumLabel" runat="server" Text='<%# Bind("question6iii", "{0:$#,#0.00}") class="sum" %>' /></td>
    </tr>
</table>

HTML, example of expected ouput

<table id="myTable" class="styledTable">
    <tr>
        <td><span>Textbox1</span></td>
        <td><input type="text" id="SomeGeneratedClientID_00" class="myValue" Value='60.00' /></td>
    </tr>
    <tr>
        <td><span>Textbox1</span></td>
        <td><input type="text" id="SomeGeneratedClientID_01" class="myValue" Value='40.00' /></td>
    </tr>

    <tr>
        <td><span>6. (iii) Total Value</span></td>
        <td><span ID="ctl00_cph_Main_TextBox1SumLabel" class="sum">100.00</span></td>
    </tr>
</table>

Javascript, jQuery

$(document).ready(function() {

    // Bind the change event to all ".myValue" elements
    $('#myTable .myValue').change(function() {
        // Find parent table element
        var $table = $(this).closest('table');

        // Update summary
        sumTableValues($table);
    });

});

var sumTableValues = function($table) {
    var sum = 0;

    // Iterate through all .myValue elements
    $table.find('.myValue').each(function(index) {
        console.log(index, $(this).val()); // DEBUG
        // NOTE: Need to make sure the value is a number

        // Add the value to the sum
        sum += Number($(this).val());
    });

    console.log('sum', sum); // DEBUG

    // Update the sum
    $table.find('tr:last .sum').text(sum);
    //$('<%= TextBox1SumLabel.ClientID %>').text(sum);  
};

Created a demo for you to play around with, really hope this helps you in any way.

Answer 2

Label controls render as a span in the HTML.

To access it you need to get it's ClientID.

You can change your javascript to:

var a = document.getElementById('<%= tb_TA_2_6.ClientID %>');

Your var c example had the Label control name wrapped in quotes so that is why it was failing.

You could also set the ClientIDMode to static for you page if you want the controls to render their IDs exactly how you specify them. Then your original getElementById will work as expected without having to get the rendered ClientID.

See MSDN for ClientIDMode info.

EDIT: If your controls are part of a container template you need to access the control differently by getting the container control and then doing a FindControl from it.

var a = document.getElementById('<%= FormView1.FindControl("tb_TA_2_6").ClientID %>');