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, Feb 19 '14 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](http://stackoverflow.com/questions/20227170/accessing-asp-net-controls-using-jquery-all-options/20227176#20227176) — Venkata Krishna, Feb 19 '14 at 17:17
possible duplicate .. http://stackoverflow.com/questions/20227170/accessing-asp-net-controls-using-jquery-all-options — Venkata Krishna, Feb 19 '14 at 17:18

score 1 · Accepted Answer · edited May 23 '17 at 12:32

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 '17 at 12:32

Community

1
1

answered Feb 19 '14 at 17:21

Venkata Krishna

14,926
5
42
56

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. – user3311356 Feb 20 '14 at 09:14

score 0 · Answer 2 · edited May 23 '17 at 12:08

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

the drawback with ClientID is that you cannot write this code in external script files. — Venkata Krishna, Feb 19 '14 at 17:27

score 0 · Answer 3 · answered Feb 19 '14 at 17:21

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 '14 at 17:21

Humpy

2,004
2
22
45

the drawback with `ClientID` is that you cannot write this code in external script files. – Venkata Krishna Feb 19 '14 at 17:23

Changing label text from dropdown list using Jquery

3 Answers3