CODEWITHSUNDEEP
javascriptasp.net
charles godin
charles godin

Reputation: 63

Passing multiple controls on the parameter of a javascript function

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)

Upvotes: 1

Views: 619

Answers (3)

Anik Islam Abhi
Anik Islam Abhi

Reputation: 25352

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>

Upvotes: 0

Kirill Slatin
Kirill Slatin

Reputation: 6143

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

Upvotes: 0

MorayM
MorayM

Reputation: 2687

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>

Upvotes: 1

Related Questions