Databases
StackOverflow2013
Postsdbo
POasp.net/javascript, why is textbox onChange event does not fire?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POasp.net/javascript, why is textbox onChange event does not fire?
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload