Passing multiple controls on the parameter of a javascript function

Question

I have a JS SIDE:

        function recolor(ddl, hdf) {

        var ColorHDF = document.getElementById(hdf); //Error Undefined

        ddl.style.backgroundColor = 'White';
        ColorHDF.value = 'White';
    }

And this Asp.net side:

            <asp:DropDownList ID="DDL_NumCadreLA_1" onchange="recolor(this, 'HDF_NumCadreLA_1');"  runat="server" Width="40" CssClass="reducedSize" Enabled="false"></asp:DropDownList>
            <asp:HiddenField ID="HDF_NumCadreLA_1" Value="load" runat="server"></asp:HiddenField>

with 'this' it's pretty easy to get the control on javascript function, but I am unable to get the Hiddenfield control into it to change his value, what should I to get it ? (with this code, ColorHDF is undefined)

MorayM · Accepted Answer · 2015-05-26 10:05:58Z

1

The ID attribute of an ASP.NET control is NOT the same as the ID of the element on the final html page. ASP.NET will assign the control an element ID when the page is loaded - have a look at the page source in your browser. There's a good blog post explaining things here.

For a simple page, the assigned ID may well be the same thing every time you load the page, but it's impossible to guarantee this. To make sure your Javascript is called with the correct element ID, use this code in your onchange:

recolor(this, '<%= HDF_NumCadreLA_1.ClientID %>');

Which will insert the correct ID when the page is loaded. Again, check out the page source in your browser to see it in action.

Alternatively, you can override the ID set by ASP.NET setting ClientIDMode property of your hidden field to Static:

<asp:HiddenField ID="HDF_NumCadreLA_1" ClientIDMode="Static" Value="load" runat="server"></asp:HiddenField>

answered May 26, 2015 at 10:05

MorayM

2,7177 gold badges34 silver badges56 bronze badges

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

1 Comment

charles godin Over a year ago

with your first solution recolor(this, '<%= HDF_NumCadreLA_1.ClientID %>'); ColorHDF is still undefined but the ClientIDMode static works perfectly, thanks for the explanation

Anik Islam Abhi · Accepted Answer · 2015-05-26 12:54:32Z

0

Try like this

<asp:DropDownList ID="DDL_NumCadreLA_1" onchange="recolor(this, '<%= HDF_NumCadreLA_1.ClientID %>');"  runat="server" Width="40" CssClass="reducedSize" Enabled="false"></asp:DropDownList>

Or like this by making ClientIDMode="Static"

<asp:HiddenField ID="HDF_NumCadreLA_1" Value="load" ClientIDMode="Static" runat="server"></asp:HiddenField>

edited May 26, 2015 at 12:54

answered May 26, 2015 at 9:55

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

Comments

Kirill Slatin · Accepted Answer · 2015-05-26 10:09:19Z

The problem rises from the fact that when ASP.NET renders html, it assigns its own ids to final elements based on the logical ids that you have assigned in .aspx. So the resulting id will look like mainpage_0_container_0_HDF_NumCadreLA_1, because normally you have a nested tree of containers.

There are several ways to struggle with this. Two a described in @Anik's answers: forbid ASP.Net modifying ids on render, provide the real after-render id. However there is a third option. You can get the element by part of the id, knowing the pattern for making ids:

var ColorHDF = document.querySelector('[id$=' + hdf + ']')[0];
//id should end with contents of hdf 'HDF_NumCadreLA_1'

This can save some spaghetti in your code, but beware that this method may fail if controls all over the app are not named wisely, i.e. may coincide over different controls

Collectives™ on Stack Overflow

Passing multiple controls on the parameter of a javascript function

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related