How do you set ASP.net html control(label) using javaScript

Question

I have created a JavaScript function to get the type of html control and set it to specified value.

function SetControlValue(ctrl, value) {

if (value == undefined)
    return "";

if (document.getElementById(ctrl).type == "text") {
    document.getElementById(ctrl).value = value;
}


else if (document.getElementById(ctrl).type == "label") {

   //document.getElementById(ctrl).innerText = value;
   document.getElementById(ctrl).innerHTML = value;      

} 

return false;

}

On my ASPX page i have created a label as below

<asp:Label id="lblMessage" class="labels"Font-Size="Medium" runat="server"></asp:Label>

and now calling the function

var don="sample text";

SetControlValue('lblMessage', don)

My question is why SetControlValue() function working on text fields but does not work on labels. Is there something that am missing? Thanks.

Dieterg · Accepted Answer · 2014-07-03 10:25:19Z

3

The reason why it's not working is because ASP changes the ID of your label. You'll need to get the client side id of the label control.

SetControlValue('<%= lblMessage.ClientID %>', value);

As @Tim B James suggested in the comments you can also set the ClientIDMode to Static as follows:

<asp:Label ClientIDMode="static" id="lblMessage" class="labels" Font-Size="Medium" runat="server"></asp:Label>

Edit: Basically you don't need to check for label or span. Instead you can check if your div element has a property called innerHTML or value. I suggest you to change the javascript function to the following and it should work:

function SetControlValue(ctrl, value) {

    if (value == undefined) {
        return "no value set";
    }

    var element = document.getElementById(ctrl);

    if(!element) {
        return "element not found";
    }

    if(element['value'] !== undefined) {
        element['value'] = value;   
    } else if (element['innerHTML'] !== undefined) {
        element['innerHTML'] = value;   
    }

    return false;
}

Fiddle

edited Jul 3, 2014 at 10:25

answered Jul 3, 2014 at 9:50

Dieterg

16.4k3 gold badges34 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tim B James Over a year ago

Also, to add to this, you can set the ClientIDMode of your label to Static this will stop asp.net from changing the id.

Angwenyi Over a year ago

Well i tried this it didn't work i was getting this error JavaScript runtime error: Unable to get property 'type' of undefined or null reference

SHEKHAR SHETE Over a year ago

plz check my updated answer! try using nodeName instead!

SHEKHAR SHETE · Accepted Answer · 2014-07-03 10:10:30Z

0

Try this:

document.getElementById(ctrl).innerHTML = value;

Update:

When a asp.net label control is rendered it is Rendered as <span> and not aslabel.

    function SetControlValue(msg) {
    document.getElementById('<%= Label1.ClientID %>').innerHTML = msg;
    var control = document.getElementById('<%= Label1.ClientID %>');
    if (control != null && control.nodeName == "span") {
      alert("its label control");
    }

This works for me!

NOTE: Please make changes in the function according to your needs!

edited Jul 3, 2014 at 10:10

answered Jul 3, 2014 at 9:43

SHEKHAR SHETE

6,08415 gold badges89 silver badges144 bronze badges

4 Comments

SHEKHAR SHETE Over a year ago

hi @Angwenyi! plz check the edited answer! and let me know..! it works i have tested it!

Angwenyi Over a year ago

A moment i try it out.

Angwenyi Over a year ago

I get JavaScript runtime error: Unable to get property 'type' of undefined or null referenceon ` var control = document.getElementById('<%= lblMessage.ClientID %>')` I dont know why

SHEKHAR SHETE Over a year ago

that is what i have mentioned just use the 'nodeName' instead of 'type' it will work!

Collectives™ on Stack Overflow

How do you set ASP.net html control(label) using javaScript

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related