asp.net/javascript, why is textbox onChange event does not fire?

Question

I want it to happen when after user select the userID then the userID show up on first readonly textbox then the onChange 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.

Here half working codes:

<tr>
    <td align="right">
        Secondary Owner
    </td>
    <td>
        <input id="Hidden1" type="hidden" />
        <asp:TextBox ID="tbAdd_Sowner" runat="server" Enabled="false"></asp:TextBox>
        <input id="Hidden2" type="hidden" />
        <input id="Hidden3" type="hidden" />
        <a href="javascript:void(0)" onclick="GalModalTOCCDialog(Hidden1, tbAdd_Sowner, Hidden2,Hidden3)">
            Get User ID</a>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator7" ValidationGroup="g1" runat="server" ErrorMessage="* Required" ControlToValidate="tbAdd_Sowner"> <b style="color:Red;"> * </b></asp:RequiredFieldValidator>
        <asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender8" runat="server" TargetControlID="RequiredFieldValidator7">
        </asp:ValidatorCalloutExtender>
    </td>
</tr>
<tr>
    <td align="right">Secondary Owners</td>
    <td>
        <asp:TextBox ID="tbAdd_Sphone" runat="server"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator13" ValidationGroup="g1" runat="server" ErrorMessage="* Required" ControlToValidate="tbAdd_Sphone"> <b style="color:Red;"> * </b></asp:RequiredFieldValidator>
        <asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender9" runat="server" TargetControlID="RequiredFieldValidator13">
        </asp:ValidatorCalloutExtender>
    </td>
</tr>

Then a javascript codes in <head> to copy first textbox value and put to second textbox:

 <script>
        function getUserID() {
            document.getElementById('tbAdd_Sphone').value = document.getElementById('tbAdd_Sowner').value;
        }

document.getElementById('tbAdd_Sowner').onchange = getUserID();

            </script>

Edited: 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.

function PopulateListboxFromString(oListbox,vNames,vUserIDs){

    var oArrayUserNames = vNames.value.split(';');
    var oArrayUserIDs = vUserIDs.value.split(';');

    for (var index=0;index < 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 < 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 >= 0;index--) {
                    oSelectObject.options[index] = null;
                };

                // copy the array   
                for (var index=0;index < 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;
}

Edited: Here is codes of GALToCCDialog.asp. In SubmitOnclick function and else if(vAction == 'OK') is where I click OK button from selected userid to submit to textbox.

<SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript>
<!--

function List_onkeydown(oList) {

    if( event.keyCode == 46 ){

        if ((oList.selectedIndex != -1)&&(oList.options[oList.selectedIndex].value != '')){
            oList.options[oList.selectedIndex] = null;

        }
    }
}

//-->
</SCRIPT>


<script language="jscript">



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< 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,"</SELECT>",strXML & "</SELECT>");
    idSpan.innerHTML = '<SELECT id=idUserSelect size=12 style="width:190px">' + strXML + '</SELECT>';
}

function SubmitOnclick(vAction, oObject){

    //DistList.action = "DistList.asp?Action=" & vAction ;

    if (vAction == 'Add'){

        if ((idUserSelect.value!='')&&(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)&&(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 < 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 < idTOList.options.length;index++) {
        //  TONames = TONames + idTOList.options[index].innerText  ;
        //  TOUserIDs = TOUserIDs + idTOList.options[index].value ;         
        //};

        //for (var index=0;index < 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 < 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 < 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)
    {

    };
};

</script>
<body class="cellcolorlightest content" onload="OnBodyLoad();">
<xml id="idXMLUsers" src="XMLGALListbox.asp?Searchstring=" ondatasetcomplete="InitializeListbox(idXMLUsers, idUsers);"></xml>

    <table class="TableBorderNormal" width="100%" border=0 cellspacing="1" cellpadding="1">
    <colgroup>
        <col width="50%"></col><col></col><col width="50%"></col>
        <thead>

        <tr>
         <td colspan="3" class="TDvwvInfo" align="left"><STRONG>Find Name</STRONG><br><FONT size=2>Type name and hit "Search"</FONT></td>
        </tr>

        <tr>
         <td  class="TDvwvInfo" align="left"><input name="SearchString" style="WIDTH: 190px" size="20"> &nbsp;</td>
         <td class="TDvwvInfo" align="middle" valign=top><input  type="button" value="Search" name="Find" onclick="SubmitOnclick('Find')"></td>
         <td class="TDvwvInfo" align="left"></td>
        </tr>

        <tr>
         <td class="TDvwvInfo" align="left" nowrap><STRONG>Users found</STRONG><br><FONT size=2>Select from list and hit "Select" to add</FONT></td>
         <td class="TDvwvInfo" align="middle"></td>
         <td class="TDvwvInfo" align="left" valign=top><STRONG>Get User ID</STRONG><br></td>
        </tr>

        </thead>

        <tr>
         <td class="TDvwv" align="left" width="33%" rowspan=2  valign=top><span id="idUsers">   </span> </td>               
         <td class="TDvwvInfo" align="middle" valign=top width="33%">
         <input  type="button" value="Select &gt;" name="Add" onclick="SubmitOnclick('Add', idTOList);"><br><br>&nbsp;
         </td>
         <td class="TDvwv" align="left" width="33%"  valign=top>
          <select id="idTOList" size="5" style="WIDTH: 190px" LANGUAGE=javascript onkeydown="return List_onkeydown(this)"> </select><br>&nbsp;
          <br />
          <b style="color:red">* Only add one user, if you added the wrong user click cancel and try again.</b>
          </td>
        </tr>

            <tr>
                 <td align=middle  valign=top>
                 <!-- <input type="hidden" value="CC  >" name="CC" onclick="SubmitOnclick('Add', idCCList);" disabled="disabled"><br><br>&nbsp;--> <!--INPUT name=Remove onclick="SubmitOnclick('Remove');" type=button value="  < Remove"--></td>
                 <td align=left  valign=top>
                  <!--<select id=idCCList size=5 style="WIDTH: 190px" LANGUAGE=javascript onkeydown="return List_onkeydown(this)" disabled="disabled" visible="false"></select></td>-->

            </tr>

        <tr>
         <td align="middle" ></td>
         <td align=middle></td>
         <td align=left>
          <input type="button" value="OK" name="OK" onclick="SubmitOnclick('OK',null);">&nbsp;&nbsp;
          <input type="button" value="Cancel" name="Cancel" onclick="SubmitOnclick('Cancel',null);"></td>
        </tr>
    </table>

</body>
</html>

you would need to use ClientID of the server control i think. and you are trying to addEventListener outside the function. — Irfan TahirKheli
– Irfan TahirKheli, Commented Sep 23, 2013 at 18:19
The userID is already insert to tbAdd_Sowner after selected. onChange should trigger when it inserted. — StudentIT
– StudentIT, Commented Sep 23, 2013 at 18:22
you are trying to addEventListener outside the function.. isn't this the issue? — Irfan TahirKheli
– Irfan TahirKheli, Commented Sep 23, 2013 at 18:23

MikeSmithDev · Accepted Answer · 2013-09-30 19:11:49Z

1

Use

document.getElementById('<%= tbAdd_Sphone.ClientID %>')

instead of

document.getElementById('tbAdd_Sphone')

MSDN Control.ClientID Property

edited Sep 30, 2013 at 19:11

MikeSmithDev

15.8k4 gold badges61 silver badges91 bronze badges

answered Sep 23, 2013 at 18:20

Irfan TahirKheli

3,6621 gold badge25 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

StudentIT Over a year ago

I got error for that, Exception Details: System.Web.HttpException: The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>). Source Error: An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

Irfan TahirKheli Over a year ago

This is because the Gridview is generating the id runtime. So can do it by looping through gridview rows though

StudentIT Over a year ago

Sorry I don't get it. I already have the userId inserted in tbAdd_Sowner. After I select, it automatic paste to this text box then it should fire to copy it.

StudentIT Over a year ago

I check for alert. It show that onChange does not trigger because the alert popup window never show up.

Irfan TahirKheli Over a year ago

You are manually putting text in the first textbox or assigning it against some event?

|

MikeSmithDev · Accepted Answer · 2013-10-01 20:08:19Z

1

+50

Changing the value of tbAdd_Sowner through JavaScript (I assume through your GalModalTOCCDialog function) isn't going to fire the onchange event.

You can fire that event manually, after you set the value:

document.getElementById('tbAdd_Sowner').onchange();

Though I'm surprised you aren't have problems with getElementById like @IrfanTahirKheli showed, which should've worked fine for you... so there are likely missing pieces of your markup that we need to help you correctly.

Other things you need to strongly consider is to not use inline styling and not use tables for formatting.

Since you seem to have problems with what I added, here is another way. Remove the onChange from your asp:TextBox and just do it all from javascript:

 document.getElementById('tbAdd_Sowner').value = 'somevalue';
 document.getElementById('tbAdd_Sowner').onchange = getUserID();

edited Oct 1, 2013 at 20:08

answered Sep 27, 2013 at 15:21

MikeSmithDev

15.8k4 gold badges61 silver badges91 bronze badges

18 Comments

afzalulh Over a year ago

'tbAdd_Sowner' id did not change after rendering because OP did not use any container. You can find details here - MSDN- in description of AutiID. I would say using client Id may save us in many places, but probably not here.

MikeSmithDev Over a year ago

@afzalulh Most likely, yes, the ID has changed on render. It doesn't matter if it is in a container or not. It is a server control.

afzalulh Over a year ago

Please check the link. Or test yourself with a server control in a page(without masterpage), and see rendered ID.

MikeSmithDev Over a year ago

@afzalulh OK you are right if he isn't using masterpage. But since the ClientID didn't work for him you notice I left it out of my answer to begin with ;)

afzalulh Over a year ago

+1 @MikeSmithDev - I would have same answer for OP. About the ID, I tested his code putting the tr in a table and it gives me correct id: why should I bother about master page while he did not mention :-)

|

Lakpa Sherpa · Accepted Answer · 2013-10-02 13:26:17Z

1

You cannot make change event just by setting value from javascript. Here is a sample by using trigger.

 <script>
       $(document).ready(function () {

           $(".tbAdd_Sowner").on('change', function () {
               var owner = $('.tbAdd_Sowner').val();
               $('.tbAdd_Sphone').val(owner);
           });

           $(".aGetID").on('click', function () {
               var tbOwner = $('.tbAdd_Sowner');
               var hidden1 = $('.Hidden1');
               var hidden2 = $('.Hidden2');
               var hidden3 = $('.Hidden3');
               GalModalTOCCDialog(hidden1, tbOwner, hidden2, hidden3);

           });

           function GalModalTOCCDialog(Hidden1, tbAdd_Sowner, Hidden2, Hidden3) {
               $(tbAdd_Sowner).val(' ').trigger('change');
           }

           $('.tbAdd_Sowner').change(function () {
               $(this).removeAttr('disabled');

           });
       });
    </script>

Here is your code, removing those validators

<table>
        <tr>
            <td align="right">Secondary Owner
            </td>
            <td>
                <input id="Hidden1" type="hidden" value="1" class="Hidden1"  />
                <asp:TextBox ID="tbAdd_Sowner" OnTextChanged="tbAdd_Sowner_TextChanged" CssClass="tbAdd_Sowner" AutoPostBack="true" runat="server" Enabled="false"   ></asp:TextBox>
                <input id="Hidden2" type="hidden" class="Hidden2" />
                <input id="Hidden3" type="hidden" class="Hidden3" />
                <a href="javascript:void(0)" id="aGetID" class="aGetID" >Get User ID</a>

            </td>
        </tr>
        <tr>
            <td align="right">Secondary Owners</td>
            <td>
                <asp:TextBox ID="tbAdd_Sphone" runat="server" CssClass="tbAdd_Sphone" ></asp:TextBox>

            </td>
        </tr>
    </table>

Server side.

protected void tbAdd_Sowner_TextChanged(object sender, EventArgs e)
        {
            tbAdd_Sowner.Text = "123";
        }

edited Oct 2, 2013 at 13:26

answered Sep 27, 2013 at 13:41

Lakpa Sherpa

1261 gold badge3 silver badges14 bronze badges

11 Comments

StudentIT Over a year ago

I don't see GalModalTOCCDialog script file. That is responsible to get AD names, uid, and etcs.

Lakpa Sherpa Over a year ago

see Jquery #aGetID click event. YOu can get textobx values there too using $('#tbAdd_Sowner').val()

StudentIT Over a year ago

well I didn't delete <a href="javascript:void(0)" onclick="GalModalTOCCDialog(ToName2, tbAdd_Powner, CCName2,CCUserID2)">. But I add <a href="javascript:void(0)" id="aGetID" >Get User Name</a> and it doesn't work Get User ID</a>

Lakpa Sherpa Over a year ago

@StudentIT: ok you can check the Jquery now. I added your function back.

Jos Over a year ago

You cannot assume that "tbAdd_Sowner" remains the same since it is a server control. Depending on your settings, it is very likely that the ID changes is something like "ctl14_tbAdd_Sowner".

|

souvickcse · Accepted Answer · 2013-09-30 19:55:41Z

0

use this <asp:TextBox ID="TextBox1" runat="server" onkeypress="document.getElementById('id').Value=this.value;" />

answered Sep 30, 2013 at 19:55

souvickcse

7,8045 gold badges40 silver badges66 bronze badges

Comments

Loser Coder · Accepted Answer · 2013-10-02 18:28:24Z

Like others have mentioned in their answers,

  <asp:TextBox id="tbAdd_Sphone" runat="server" />

will have a server-side dynamic client-ID prefixed to the generated HTML. If you see the source code of the page (or use the developer tools) in a browser of choice, you will notice you the ID is different than what you are passing in to your method call i.e something like this:

<textarea id="ctl00_OuterASPControlID_tbADD_Sphone"></textarea>

You can keep the className static by using class="tbAdd_Sphone" if the class is dynamically prefixed too. Or, try to get element by ID on

<%=tbAdd_Sphone.ClientID %>

You can either set the ClientID mode to static, or you can try using UniqueID.

Another thing to note, javascript has a special behavior. If you call of a method with a set number of variables passed in correctly in the call, it will only use those values in the functionality. If there is null/undefined data passed into the call, the rest of the parameters are just ignored.

functionName:function(parameter1, parameter2) { 

            //Default behavior can be overridden if parameter2 is not passed in as expected.
            if(parameter2 ==null || parameter2=='undefined') { 
                parameter2 = "Some value"; 
                    } 
}


    functionName("testPar1");               //Works but parameter2 is not passed in as expected
    functionName("testPar1", "testPar2");   //Works
    functionName("testPar1", undefined);    //Works, but parameter2 is not passed in as expected

If you need to use the id for phone, either do a substring search for getting the element by the actual ID, or use a getElementsByTag in your javascript to search for textboxes, and you can use any other property, say in plain Javascript:

var x = document.getElementsByTag("textbox"); 
if(x!=null && x.attribute('class') == 'tbAdd_Sphone' )  { 
 var valueX = x.attribute('value'); 
}

Collectives™ on Stack Overflow

asp.net/javascript, why is textbox onChange event does not fire?

5 Answers 5

7 Comments

18 Comments

11 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

18 Comments

11 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related