CODEWITHSUNDEEP
javascriptjqueryajaxonchange
Anil chakrahari
Anil chakrahari

Reputation: 31

onchange event listener not firing on textbox

My Form has a dropdown list with countries which does a AJAX postback and renders another dropdown with cities.

I have textbox field phonenumber which has been assigned with a event listener, for debug purposes it justs throws an alert msg box to the screen.

Scenario 1

when the form is loaded the countries dropdown is preselected with the logged in user country, and the textbox field phonenumber is prerendered as well. Then i make a change to this textbox of phonenumber, the alert box pops up everytime. i.e. the event seems to be firing all the time.

Scenario 2 - the problem

After scenario 1, if the user changes the countries selection, there is a ajaxpostback and when the form finishes rendering, and when I make another change in the textbox phonenumber, the event does not fire anymore, any ideas why?

Code: Event listener registration

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script>
    $(document).ready(function () {
        document.getElementById("ctl00_ContentPlaceHolder1_officePhone_txtInput").addEventListener("change", phoneNumberParser, true);
        document.getElementById("ctl00_ContentPlaceHolder1_country_cbInput_Input").addEventListener("change", triggerCountryChange);
        //alert(document.getElementById("ctl00_ContentPlaceHolder1_officePhone_txtInput").value);
        //$("ctl00_ContentPlaceHolder1_officePhone_txtInput").bind("onchange", phoneNumberParser);
    });
          </script>

onChange code

<script>
var selectedcountrycodeval;

    function triggerCountryChange() {


        //var phoneNumber = document.getElementById("ctl00_ContentPlaceHolder1_officePhone_txtInput").value;
        //alert(phoneNumber);
        //ctl00$ContentPlaceHolder1$country$cbInput_Input  country name input tag
        var regionCode = document.getElementById("ctl00_ContentPlaceHolder1_country_cbInput_Input").value;
        alert(regionCode);
        regionCode = getCountry(regionCode);
        selectedcountrycodeval = regionCode;
        alert(regionCode);
        //document.getElementById("ctl00_ContentPlaceHolder1_officePhone_txtInput").addEventListener("change", phoneNumberParser);
        //alert(document.getElementById("ctl00_ContentPlaceHolder1_officePhone_txtInput").addEventListener);
        //document.getElementById("ctl00_ContentPlaceHolder1_country_cbInput_Input").addEventListener("change", triggerCountryChange);
    }
    function phoneNumberParser() {

        alert(selectedcountrycodeval);
        var phoneNumber = document.getElementById("ctl00_ContentPlaceHolder1_officePhone_txtInput").value;
        alert(phoneNumber);
}
</script>

Form values

country

<INPUT style="WIDTH: 220px" 
      id=ctl00_ContentPlaceHolder1_country_cbInput_Input 
      class=ComboBoxInput_WindowsXP tabIndex=1 value="United Kingdom" 
      name=ctl00$ContentPlaceHolder1$country$cbInput_Input></INPUT>

Phone

<INPUT style="WIDTH: 221px" 
      id=ctl00_ContentPlaceHolder1_officePhone_txtInput class=inputTextBox 
      tabIndex=1 value="+44 (20) 8222-2662" maxLength=64 
      name=ctl00$ContentPlaceHolder1$officePhone$txtInput >

Upvotes: 3

Views: 2675

Answers (1)

Sushanth --
Sushanth --

Reputation: 55740

Looks like you seem to be adding the phone number input after the form is refreshed.. For such cases it is better to Delegate the event.

$(document).on('change' , '[id*="officePhone_txtInput"]', phoneNumberParser );

Upvotes: 1

Related Questions