title: asp.net/javascript, why is textbox onChange event does not fire?
body: <p>I want it to happen when after user select the userID then the userID show up on first readonly textbox then the <code>onChange</code> event should fire when it show on first readonly textbox so it can copy this userID to second textbox. However it doesn't work, it only worked is the userID show up on first textbox but the onChange doesn't trigger for second texbox.</p>
  
  <p>Here half working codes:</p>
  
  <pre><code>&lt;tr&gt;
      &lt;td align="right"&gt;
          Secondary Owner
      &lt;/td&gt;
      &lt;td&gt;
          &lt;input id="Hidden1" type="hidden" /&gt;
          &lt;asp:TextBox ID="tbAdd_Sowner" runat="server" Enabled="false"&gt;&lt;/asp:TextBox&gt;
          &lt;input id="Hidden2" type="hidden" /&gt;
          &lt;input id="Hidden3" type="hidden" /&gt;
          &lt;a href="javascript:void(0)" onclick="GalModalTOCCDialog(Hidden1, tbAdd_Sowner, Hidden2,Hidden3)"&gt;
              Get User ID&lt;/a&gt;
          &lt;asp:RequiredFieldValidator ID="RequiredFieldValidator7" ValidationGroup="g1" runat="server" ErrorMessage="* Required" ControlToValidate="tbAdd_Sowner"&gt; &lt;b style="color:Red;"&gt; * &lt;/b&gt;&lt;/asp:RequiredFieldValidator&gt;
          &lt;asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender8" runat="server" TargetControlID="RequiredFieldValidator7"&gt;
          &lt;/asp:ValidatorCalloutExtender&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td align="right"&gt;Secondary Owners&lt;/td&gt;
      &lt;td&gt;
          &lt;asp:TextBox ID="tbAdd_Sphone" runat="server"&gt;&lt;/asp:TextBox&gt;
          &lt;asp:RequiredFieldValidator ID="RequiredFieldValidator13" ValidationGroup="g1" runat="server" ErrorMessage="* Required" ControlToValidate="tbAdd_Sphone"&gt; &lt;b style="color:Red;"&gt; * &lt;/b&gt;&lt;/asp:RequiredFieldValidator&gt;
          &lt;asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender9" runat="server" TargetControlID="RequiredFieldValidator13"&gt;
          &lt;/asp:ValidatorCalloutExtender&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>Then a javascript codes in <code>&lt;head&gt;</code> to copy first textbox value and put to second textbox:</p>
  
  <pre><code> &lt;script&gt;
          function getUserID() {
              document.getElementById('tbAdd_Sphone').value = document.getElementById('tbAdd_Sowner').value;
          }
  
  document.getElementById('tbAdd_Sowner').onchange = getUserID();
  
              &lt;/script&gt;
  </code></pre>
  
  <p><strong>Edited:</strong> I add a GALModalDialog.js codes here because some of you want to see what it like. I also have GALToCCDialong.asp that listed userid to choose and XMLGALListbox.asp that get the userid from ADs.</p>
  
  <pre><code>function PopulateListboxFromString(oListbox,vNames,vUserIDs){
  
      var oArrayUserNames = vNames.value.split(';');
      var oArrayUserIDs = vUserIDs.value.split(';');
  
      for (var index=0;index &lt; oArrayUserIDs.length;index++) {
  
          if (oArrayUserNames[index] != ''){
              var oOption = document.createElement("OPTION");
              oListbox.options.add(oOption);
              oOption.innerText = oArrayUserNames[index];
              oOption.value = oArrayUserIDs[index];
          }
      }   
  };
  
  function GalModalTOCCDialog(oTONames, oTOUserIDs,oCCNames, oCCUserIDs ) {
  
  
          if (oCCNames != null){
  
              var oInputArray = new Array(oTONames.value,oTOUserIDs.value,oCCNames.value,oCCUserIDs.value);
  
          } else {
  
              var oInputArray = new Array(oTONames.value,oTOUserIDs.value,'','');
  
          }
  
          var oOutputArray = window.showModalDialog('GalAccess/GALToCCDialog.asp', oInputArray, 'dialogWidth:510px;dialogHeight:400px;status:no;help:no;');
  
  
  
  
  
          // Check if we get something back; 
          // User might have closed the window without using the buttons
          if (oOutputArray != null){
  
              //first element is true if user clicked OK
  
              if (oOutputArray[0]) {
  
                  if (oCCNames != null){
  
                      oTONames.value = oOutputArray[1];
                      oTOUserIDs.value = oOutputArray[2];
                      oCCNames.value = oOutputArray[3];
                      oCCUserIDs.value = oOutputArray[4];
  
                  } else {
  
                      oTONames.value = oOutputArray[1];
                      oTOUserIDs.value = oOutputArray[2];     
                  }
  
  
  
              } 
          }
  
      return false;
  }
  
  function GalModalDialog(oSelectObject, oUserID) {
  
      if (oUserID == null){
          // there is a select object to fill data from
          // fill the input array
          var oInputArray = new Array(new Array(oSelectObject.options.length),new Array(oSelectObject.options.length));
  
          for (var index=0;index &lt; oInputArray[0].length;index++) {
              oInputArray[0][index] = oSelectObject.options[index].innerText;
              oInputArray[1][index] = oSelectObject.options[index].value;
  
          };
  
          var oOutputArray = window.showModalDialog('../GALDialog/GALModalDialog.asp', oInputArray, 'dialogWidth:500px;dialogHeight:320px;status:no;help:no;');
  
          // Check if we get something back; 
          // User might have closed the window without using the buttons
          if (oOutputArray != null){
  
              //first element is true if user clicked OK
  
              if (oOutputArray[0]) {
                  //remove existing from end to beginning otherwise not all options are removed.
  
                  var length=oSelectObject.options.length;
                  for (var index=length-1;index &gt;= 0;index--) {
                      oSelectObject.options[index] = null;
                  };
  
                  // copy the array   
                  for (var index=0;index &lt; oOutputArray[1].length;index++) {
                      var oOption = document.createElement("OPTION");
                      oSelectObject.options.add(oOption);
                      oOption.innerText = oOutputArray[1][index];
                      oOption.value = oOutputArray[2][index];
  
                  };
              } 
          }
      } else
      {
          // there are 2 text objects to fill data from; the first contains the name, the secound the userid.
          //if (oSelectObject.value != '' ) {
          //  var oInputArray = new Array(new Array(1),new Array(1));
          //
          //  oInputArray[0][0] = oSelectObject.value;
          //  oInputArray[1][0] = oUserID.value;
  
          //} else {
  
                  var oInputArray = new Array(new Array(0),new Array(0));
  
          //}     
          var oOutputArray = window.showModalDialog('../GALDialog/GALModalDialog.asp', oInputArray, 'dialogWidth:500px;dialogHeight:320px;status:no;help:no;');
  
          if (oOutputArray != null){
  
              //first element is true if user clicked OK
  
              if (oOutputArray[0]) {
  
                  // copy the data    
                  oSelectObject.value = oOutputArray[1][0];
                  oUserID.value = oOutputArray[2][0];
  
  
              } 
          }
      }
      return false;
  }
  </code></pre>
  
  <p><strong>Edited:</strong> Here is codes of GALToCCDialog.asp. In <code>SubmitOnclick</code> function and <code>else if(vAction == 'OK')</code> is where I click OK button from selected userid to submit to textbox.</p>
  
  <pre><code>&lt;SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript&gt;
  &lt;!--
  
  function List_onkeydown(oList) {
  
      if( event.keyCode == 46 ){
  
          if ((oList.selectedIndex != -1)&amp;&amp;(oList.options[oList.selectedIndex].value != '')){
              oList.options[oList.selectedIndex] = null;
  
          }
      }
  }
  
  //--&gt;
  &lt;/SCRIPT&gt;
  
  
  &lt;script language="jscript"&gt;
  
  
  
  function InitializeListbox(idXML, idSpan){
  
      // get to the XML specifying the names
      var oSelects;
      var strXML;
  
      oSelects  = idXML.XMLDocument.documentElement.childNodes;
      strXML = '';
      // Get all the options in 1 string
      for (var index=0;index&lt; oSelects.length;index++){
          strXML = strXML + oSelects[index].xml;
      }
      // the error handlingis there if idSpan refers to multiple objects
  
      // Insert the options in the html before the end of the SELECT
      // window.alert(strXML);
      //idSpan.innerHTML = replace(idSpan.innerHTML,"&lt;/SELECT&gt;",strXML &amp; "&lt;/SELECT&gt;");
      idSpan.innerHTML = '&lt;SELECT id=idUserSelect size=12 style="width:190px"&gt;' + strXML + '&lt;/SELECT&gt;';
  }
  
  function SubmitOnclick(vAction, oObject){
  
      //DistList.action = "DistList.asp?Action=" &amp; vAction ;
  
      if (vAction == 'Add'){
  
          if ((idUserSelect.value!='')&amp;&amp;(idUserSelect.value!='Unknown')){
              var oOption = document.createElement("OPTION");
              oObject.options.add(oOption);
              oOption.innerText = idUserSelect.options[idUserSelect.selectedIndex].text;
              oOption.value = idUserSelect.options[idUserSelect.selectedIndex].value;
          }
      }   else if(vAction == 'Find') {
          idXMLUsers.src ='XMLGALListbox.asp?Searchstring=' + SearchString.value;
  
      } else if(vAction == 'Remove'){
  
          if ((idMyList.selectedIndex != -1)&amp;&amp;(idMyList.options[idMyList.selectedIndex].value != '')){
              idMyList.options[idMyList.selectedIndex] = null;
          }
      } else if(vAction == 'OK'){
  
          //window.returnValue = cal.day + ' ' + MonthNames[cal.month-1] + ' ' + cal.year ;
          // create an array
  
          var TONames = ''
          var TOUserIDs = ''
          var CCNames = ''
          var CCUserIDs = ''
  
          for (var index = 0; index &lt; 1; index++) {
              TONames = TONames + idTOList.options[index].innerText;
              TOUserIDs = TOUserIDs + idTOList.options[index].value;
          };
  
          //Commented out by Nick, use if you want multiple userIDs etc...
          //for (var index=0;index &lt; idTOList.options.length;index++) {
          //  TONames = TONames + idTOList.options[index].innerText  ;
          //  TOUserIDs = TOUserIDs + idTOList.options[index].value ;         
          //};
  
          //for (var index=0;index &lt; idCCList.options.length;index++) {
              //CCNames = CCNames + idCCList.options[index].innerText ;
              //CCUserIDs = CCUserIDs + idCCList.options[index].value ;
  
          //};
  
          var oArray = new Array(true,TONames,TOUserIDs,CCNames,CCUserIDs);
  
          window.returnValue = oArray;
  
          //window.alert(TONames);
          //window.alert(TOUserIDs);
          //window.alert(CCNames);
          //window.alert(CCUserIDs);
  
          window.close();
  
      } else if(vAction == 'Cancel'){
          var oArray = new Array(false);
          window.returnValue = oArray;
          window.close();
  
      }   
  
  }
  
  function OnBodyLoad() {
  
      //window.alert('test');
      //clear all list data
  
      try{
          var oArray = window.dialogArguments;
  
          //PopulateListboxFromString(idTOList,oArray[0],oArray[1])
          //PopulateListboxFromString(idCCList,oArray[2],oArray[3])
  
      } catch(e)
      {
      }
  
  };
  
  function PopulateListboxFromString(oListbox,vNames,vUserIDs){
  
      var oArrayUserNames = vNames.split(';');
      var oArrayUserIDs = vUserIDs.split(';');
      for (var index=0;index &lt; oArrayUserIDs.length;index++) {
  
          if (oArrayUserNames[index] != ''){
              var oOption = document.createElement("OPTION");
              oListbox.options.add(oOption);
              oOption.innerText = oArrayUserNames[index];
              oOption.value = oArrayUserIDs[index];
          }
      }   
  
  };
  
  function OnBodyLoad__() {
  
      //window.alert('test');
      try{
          var oArray = window.dialogArguments;
  
          for (var index=0;index &lt; oArray[0].length;index++) {
              var oOption = document.createElement("OPTION");
              idMyList.options.add(oOption);
              oOption.innerText = oArray[0][index];
              oOption.value = oArray[1][index];
  
          };
      } catch(e)
      {
  
      };
  };
  
  &lt;/script&gt;
  &lt;body class="cellcolorlightest content" onload="OnBodyLoad();"&gt;
  &lt;xml id="idXMLUsers" src="XMLGALListbox.asp?Searchstring=" ondatasetcomplete="InitializeListbox(idXMLUsers, idUsers);"&gt;&lt;/xml&gt;
  
      &lt;table class="TableBorderNormal" width="100%" border=0 cellspacing="1" cellpadding="1"&gt;
      &lt;colgroup&gt;
          &lt;col width="50%"&gt;&lt;/col&gt;&lt;col&gt;&lt;/col&gt;&lt;col width="50%"&gt;&lt;/col&gt;
          &lt;thead&gt;
  
          &lt;tr&gt;
           &lt;td colspan="3" class="TDvwvInfo" align="left"&gt;&lt;STRONG&gt;Find Name&lt;/STRONG&gt;&lt;br&gt;&lt;FONT size=2&gt;Type name and hit "Search"&lt;/FONT&gt;&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
           &lt;td  class="TDvwvInfo" align="left"&gt;&lt;input name="SearchString" style="WIDTH: 190px" size="20"&gt; &amp;nbsp;&lt;/td&gt;
           &lt;td class="TDvwvInfo" align="middle" valign=top&gt;&lt;input  type="button" value="Search" name="Find" onclick="SubmitOnclick('Find')"&gt;&lt;/td&gt;
           &lt;td class="TDvwvInfo" align="left"&gt;&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
           &lt;td class="TDvwvInfo" align="left" nowrap&gt;&lt;STRONG&gt;Users found&lt;/STRONG&gt;&lt;br&gt;&lt;FONT size=2&gt;Select from list and hit "Select" to add&lt;/FONT&gt;&lt;/td&gt;
           &lt;td class="TDvwvInfo" align="middle"&gt;&lt;/td&gt;
           &lt;td class="TDvwvInfo" align="left" valign=top&gt;&lt;STRONG&gt;Get User ID&lt;/STRONG&gt;&lt;br&gt;&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;/thead&gt;
  
          &lt;tr&gt;
           &lt;td class="TDvwv" align="left" width="33%" rowspan=2  valign=top&gt;&lt;span id="idUsers"&gt;   &lt;/span&gt; &lt;/td&gt;               
           &lt;td class="TDvwvInfo" align="middle" valign=top width="33%"&gt;
           &lt;input  type="button" value="Select &amp;gt;" name="Add" onclick="SubmitOnclick('Add', idTOList);"&gt;&lt;br&gt;&lt;br&gt;&amp;nbsp;
           &lt;/td&gt;
           &lt;td class="TDvwv" align="left" width="33%"  valign=top&gt;
            &lt;select id="idTOList" size="5" style="WIDTH: 190px" LANGUAGE=javascript onkeydown="return List_onkeydown(this)"&gt; &lt;/select&gt;&lt;br&gt;&amp;nbsp;
            &lt;br /&gt;
            &lt;b style="color:red"&gt;* Only add one user, if you added the wrong user click cancel and try again.&lt;/b&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
  
              &lt;tr&gt;
                   &lt;td align=middle  valign=top&gt;
                   &lt;!-- &lt;input type="hidden" value="CC  &gt;" name="CC" onclick="SubmitOnclick('Add', idCCList);" disabled="disabled"&gt;&lt;br&gt;&lt;br&gt;&amp;nbsp;--&gt; &lt;!--INPUT name=Remove onclick="SubmitOnclick('Remove');" type=button value="  &lt; Remove"--&gt;&lt;/td&gt;
                   &lt;td align=left  valign=top&gt;
                    &lt;!--&lt;select id=idCCList size=5 style="WIDTH: 190px" LANGUAGE=javascript onkeydown="return List_onkeydown(this)" disabled="disabled" visible="false"&gt;&lt;/select&gt;&lt;/td&gt;--&gt;
  
              &lt;/tr&gt;
  
          &lt;tr&gt;
           &lt;td align="middle" &gt;&lt;/td&gt;
           &lt;td align=middle&gt;&lt;/td&gt;
           &lt;td align=left&gt;
            &lt;input type="button" value="OK" name="OK" onclick="SubmitOnclick('OK',null);"&gt;&amp;nbsp;&amp;nbsp;
            &lt;input type="button" value="Cancel" name="Cancel" onclick="SubmitOnclick('Cancel',null);"&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>