CODEWITHSUNDEEP
javascriptasp.netvariables
Philip Stratford
Philip Stratford

Reputation: 4733

How Do I Pass ASP.NET Control Name to Javascript Function?

I have Googled this to death and found lots of 'answers', but none of them will work for me, so maybe you clever people could give me a 'definitive' answer?

I have a Javascript function:

function enableSaveLink() {
    document.getElementById('<%= btnSaveLink.ClientID %>').removeAttribute('disabled');
}

This works fine, but obviously it is hard-coded to enable a particular control on my page. What I'd like is to be able to call this function from any control on the page, passing the name of the control I'd like to enable as a variable. So, in an ideal world, my Javascript function would look like this:

function enableControl(ctl) {
    document.getElementById(ctl).removeAttribute('disabled');
}

And I'd call it like this:

<asp:button id="btnTestButton" runat="server" Text="Click Me" onclientclick="enableControl('txtTestTextbox') />
<asp:button id="txtTestTextbox" runat="server" enabled="false />

I know the way I've passed the control name would never work, but I've tried passing it in all different ways and none work, so this is just for the purposes of illustration. Can anyone tell me how to actually make this work?

Upvotes: 2

Views: 16375

Answers (4)

Philip Stratford
Philip Stratford

Reputation: 4733

Ok, I've cracked it. There are probably more ways than one to do this, but this is fairly elegant.

My Javascript function:

    function enableControl(ctl) {
        document.getElementById(ctl).removeAttribute('disabled');
    }

My ASP.NET markup:

<asp:Button ID="btnTestButton" runat="server" Text="Click to enable" OnClientClick="enableControl('txtTestTextbox');" />
<asp:TextBox ID="txtTestTextBox" runat="server" enabled="false" ClientIDMode="Static" />

The key is the ClientIDMode property, which, when set to static, means that the control's client-side ID when it is rendered will match the ID you give it in markup. If it's within a naming container you may need to include that in the variable passed in the function call. See here for more info about ClientIDMode.

Anyway, this works for me! Thanks for your input, everyone.

Upvotes: 1

Paul Aldred-Bann
Paul Aldred-Bann

Reputation: 6020

Use the this reference (more info here):

<asp:button id="btnTest" runat="server" Text="Click Me" onclientclick="enableControl(this);" />

Then in your script:

function enableSaveLink(elem) {
    elem.removeAttribute('disabled');
}

Here you are passing a reference to the object calling the function to the function, you can then just set the attribute on the element rather than finding it in the DOM.

EDIT - Just realised what your intended usage is. If you're looking to fire an event from a disabled element when clicked, then you can't do this from the element. It would need to be handled from some other enabled element. The above method works fine if you intend to disable the element when clicked - but not enable the element when clicked.

EDIT - Just to accompany my comment, if you have a uniform structure like this (i.e. where all inputs have a corresponding label - or even button) then:

<div>
    <label onclick="activateSibling(this);">Input One:</label>
    <input type="text" />
</div>

You could try this:

function activateSibling(label) {
    label.nextSibling.removeAttribute("disabled");
}

I've made a jsFiddle demonstrating my concept in jQuery which seems to work fine.

EDIT - OK, last idea. What about custom attributes. You could add a target attribute to your clickable element which contains the Id you're going to enable, like so:

<label target="active_me" onclick="activate(this);">Click to activate</label>

<input type="text" id="active_me" disabled="disabled" />

And your script:

function activate(label) {
    var inputId = this.getAttribute("target");
    var input = document.getElementById(inputId);
    input.removeAttribute("disabled");
}

Although, it's starting to feel like we're fighting against the technology a little and we're not too far removed from ctrlInput.ClientID. But I suppose this makes your markup a little cleaner and gives you a function that's bindable en masse.

Upvotes: 1

Buzz
Buzz

Reputation: 6330

ClientID is used for getting server side control on javascript.

var element=document.getElementById('<%=lblTest.ClientID%>');

Upvotes: 0

nunespascal
nunespascal

Reputation: 17724

You need to use the ClientID property of the control.

This will help:

<asp:button id="btnTest" runat="server" Text="Click Me" 
            onclientclick="enableControl('<%= lblTest.ClientID %>') />

Upvotes: 3

Related Questions