CODEWITHSUNDEEP
javascriptasp.net
Koosh
Koosh

Reputation: 896

capture the control ID in a javascript function, by passing parameter

HI so my JS skills are a little rusty but I'm trying to create a few functions so they work on the client side, rather than running server code, here's what I'm trying to do:

I have a drop down control, and a textbox. The textbox is depended on the value from down down and is disabled on page load.

i'm trying to call a function so if YES is selected from dropdown, the textbox will be enabled for text entry. Here's what I'm doing:

function DependentControlByDropDown(sender, Control, DependentControlID) {
    try {

       var senderControl = sender.selectedOptions[0].text;
       var controlEnable = (senderControl == Control);
       console.log(controlEnable);

       var control = document.getElementById(DependentControlID); this gives me NULL if i do console.log(control)
       DependentControlID.disabled = controlEnable; //controlEnable has a value of either TRUE or FALSE but it doesn't work on DependentControlID
       }
   catch (e) {
        alert("DependentControlByDropDown : " + e.message);
   }
  }

I'm calling this in dropdown like so:

onchange="DependentControlByDropDown(this,'Yes','txtbox1')"

So what's happening here is I get the right value 'Yes', or 'No' I tested it with console.log. The problem is with the dependednt control. If I do console.log(DependentControlID) it is showing me the correct control, but when I try to disabled=false it doesn't work. I also tried document.getElementByID(DependentControlID).disabled=false but that doesn't work either. Any help?!

Upvotes: 0

Views: 798

Answers (2)

Tyler Roper
Tyler Roper

Reputation: 21672

As we've deduced in the comments of your question, you're using ASP.NET.

This is extremely important to note, because ASP.NET overrides assigned IDs to ensure that they are unique. For example, if you were to do...

<asp:Textbox runat="server" id="txtbox1"></asp:Textbox>

...the rendered HTML may look something like (example)...

<input id="ctl00$MainContent$txtbox1">

Because of this, getElementById("txtbox1") doesn't find anything.

To prevent this from happening, you can add ClientIdMode="static" to your textbox:

<asp:Textbox runat="server" ClientIdMode="static" id="txtbox1"></asp:Textbox>

The rendered HTML will now be the following...

<input id="txtbox1">

NOTE: If you have more than one of these textboxes on the page, for example if you're using it in a GridView or a Repeater, do not use ClientIdMode="static"! It will create duplicate IDs, which are not valid.

Upvotes: 1

Craig Wayne
Craig Wayne

Reputation: 5060

The problem is that you were trying to access the textbox via it's ID as text. You need set the disabled attribute on it's node value, which you already have, i.e. control.

Additionally you were trying to set the textbox's disabled attribute to the same value as controlEnable. I've set it to the OPPOSITE of controlEnable

function DependentControlByDropDown(sender, Control, DependentControlID) {
  try {
var senderControl = sender.selectedOptions[0].text;
var controlEnable = (senderControl == Control);

console.log('controlEnable',controlEnable);
console.log('DependentControlID', DependentControlID);

var control = document.getElementById(DependentControlID);
console.log('control', control);

control.disabled = !controlEnable;
  } catch (e) {
alert("DependentControlByDropDown : " + e.message);
  }
}
<input id="txtbox1" />
<select onchange="DependentControlByDropDown(this,'Yes','txtbox1')">
  <option value=""></option>
  <option value="Yes">Yes</option>
  <option value="No">No</option>
</select>

Upvotes: 1

Related Questions