Hi, folks.

Can anyone explain this problem? I am using Visual Studio 2005 (ASP.NET 2.0/C#). I have created a composite control which combines a DropDownList with a TextBox. When the user selects a list entry, the text is copied into the textbox.

I have this JavaScript function, to which I pass the TextBox and DropDownList objects:

 function setTextBoxToDropDownListValue(textBoxID, dropDownListID)
 {
  if(dropDownListID.selectedIndex >= 0)
  {
   textBoxID.value = dropDownListID[dropDownListID.selectedIndex].text;
  }
 }
 

I call it using this code:

  private string GetCopyTextFunctionCall()
  {
   StringBuilder functionCallSB = new StringBuilder();
   functionCallSB.Append(CopyTextFunctionName);
   functionCallSB.Append("(");
   functionCallSB.Append(this.textBox.TextBox.ClientID);
   functionCallSB.Append(", ");
   functionCallSB.Append(this.dropDownList.ClientID);
   functionCallSB.Append(");");

   return functionCallSB.ToString();
  }

which becomes this:

javascript:setTextBoxToDropDownListValue(DropDownListTextBox1_expandableTextBox_textBox, DropDownListTextBox1_dropDownList);

This works fine UNLESS I add a validator to DropDownListTextBox1. When I attach a validator to the control, this code gets generated:

function anonymous() {

ValidatorOnChange(event);

setTextBoxToDropDownListValue(DropDownListTextBox1_expandableTextBox_textBox, DropDownListTextBox1_dropDownList);

}

and I get this error when I select a list item from the DropDownList:
 
  Microsoft JScript runtime error:
  'DropDownListTextBox1_expandableTextBox_textBox' is undefined
 
 In order to make this work with a validator, I had to change the javascript to this (passing the ID string name instead of the object ID, and then deriving the object from the string):
 
  function setTextBoxToDropDownListValue(textBoxID, dropDownListID)
  {
  var textBox = document.getElementById(textBoxID);
  var dropDownList = document.getElementById(dropDownListID);

  if(dropDownList.selectedIndex >= 0)
  {
   textBox.value = dropDownList[dropDownList.selectedIndex].text;
   }
  }

and the method to this (the same as above, but passing the client ID as a quoted string):

  private string GetCopyTextFunctionCall()
  {
   StringBuilder functionCallSB = new StringBuilder();
   functionCallSB.Append(CopyTextFunctionName);
   functionCallSB.Append("('");
   functionCallSB.Append(this.textBox.TextBox.ClientID);
   functionCallSB.Append("', '");
   functionCallSB.Append(this.dropDownList.ClientID);
   functionCallSB.Append("');");

   return functionCallSB.ToString();
  }

which becomes this:

javascript:setTextBoxToDropDownListValue('DropDownListTextBox1_expandableTextBox_textBox', 'DropDownListTextBox1_dropDownList');

Why did I have to make this change just because of a validator? What is even stranger, I use the first pattern in other composite controls that use validators and do not have this issue.

 

Any ideas?

 

Thanks,

Carl

 

I'd think this would relate to how client-side validation framework hooks up the validator to your control however not 100% sure unless you provide relevant source code of your control for repro.

Anyway, I would use the second approach, which you used as workaround, by default since document.getElementById is standard way of doing it. You wouldn't access DOM objects straight without document.getElementById   (isn't that IE-specific to access them with ID?)