Changing label text from dropdown list using Jquery

Question

I can't seem to get this to fire.. or indeed change the labels text. Can anyone offer any advise? The alert is there just because I was testing to see whether or not the event was actually firing.. which it doesn't seem to be. The only other piece of information is that this is a form within a fancybox iframe. I'm not even certain I have the code right to change the text, but that's the second issue really.. right now I can't get the event to fire.

Code is

<asp:DropDownList ID="ddlPUom" runat="server" CssClass="form-control input-sm"></asp:DropDownList>



<asp:Label ID="lblpuom" ccclass="col-xs-2 control-label" runat="server" Text=""></asp:Label>


<script type="text/javascript">
    $('#ddlPUom').change(function () {
        alert("did this fire?");
        var lbltext = doc.getElementById("ddlPUom");
        var lblPUOM = doc.getElementById("lblpuom");
        lblPUOM.lbltext = lbltext.innerhtml;
    });
</script>

Thanks for all the comments.. you steered me in the right directions. In the end I changed the labels to standard <label></label> which worked with the above code and made a document.ready function to update from the dropdowns which are set from the code behind..

Also please show us your HTML. And innerhtml !== innerHTML — Sterling Archer
– Sterling Archer, Commented Feb 19, 2014 at 17:12
I'm guessing that ddlPUom is a server side control with a runat="server" & you need to handle that differently. More here — Venkata Krishna
– Venkata Krishna, Commented Feb 19, 2014 at 17:17
possible duplicate .. stackoverflow.com/questions/20227170/… — Venkata Krishna
– Venkata Krishna, Commented Feb 19, 2014 at 17:18

Community · Accepted Answer · 2017-05-23 12:32:43Z

1

The reason is that since ddlPUom is a server side control, the id changes when it is rendered in DOM. The page info and control info gets prepended and becomes something like this ctl00_Main_ddlPUom

Use

$('[id$=ddlPUom]').change(function () { // id which ends with the text 'ddlPUom'

or

$('[id*=ddlPUom]').change(function () { // id which contains the text 'ddlPUom'

But there are several other ways here https://stackoverflow.com/a/20227176/489512

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Feb 19, 2014 at 17:21

Venkata Krishna

15.2k5 gold badges45 silver badges57 bronze badges

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

1 Comment

user3311356 Over a year ago

Thanks for your help. You were all on the right lines. There also was really no need for the labels to be runat server as I could set them to pick up the correct values from the drop down list which were initially set from the code behind. So in the end set a document.ready function to set the labels and then .change to change them as needed.

Humpy · Accepted Answer · 2014-02-19 17:21:42Z

0

You might be able to try something like this..

<script type="text/javascript">
    $('#ddlPUom').change(function () {
        alert("did this fire?");
        var lbltext = doc.getElementById("<%=ddlPUom.ClientID%>");
        var lblPUOM = doc.getElementById("<%=lblpuom.ClientID%>");
        lblPUOM.lbltext = lbltext.innerhtml;
    });
</script>

You might need to add the ClientID portion as well to your drop down list.

answered Feb 19, 2014 at 17:21

Humpy

2,0022 gold badges22 silver badges45 bronze badges

1 Comment

Venkata Krishna Over a year ago

the drawback with ClientID is that you cannot write this code in external script files.

Community · Accepted Answer · 2017-05-23 12:08:19Z

0

Your code looks correct enough to have your alert execute. Maybe the id of your control is not actually set to ddlPUom. It is sometimes case sensitive. See this post about the case sensitivity JQuery class selectors like $(.someClass) are case sensitive?

Also check the error console in your browser to see if any javascript errors are thrown. Firefox : Tools > Web Developer > Error Console Chrome: right click on the page and select inspect element, click Console in the window that appears.

Now that you added the html - the code below should get the event to fire.

$(document).ready(function(){    
$('#<%=ddlPUom.ClientID%>').change(function () {
            alert("did this fire?");
    }
});

edited May 23, 2017 at 12:08

CommunityBot

11 silver badge

answered Feb 19, 2014 at 17:17

kale909

1291 silver badge4 bronze badges

1 Comment

Venkata Krishna Over a year ago

the drawback with ClientID is that you cannot write this code in external script files.

Collectives™ on Stack Overflow

Changing label text from dropdown list using Jquery

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related