jquery for intlTelInput can't add event listener

Question

trying to do something similar to the country code listener drop down but with a text box which should populate with the country code (so that I can subsequently use the value in PHP code).

Adding the event listener doesn't work:

<script>

$(document).ready(function(){

    $("#mobile").intlTelInput({
   onlyCountries: ["au","ca","us","nz","gb"],
     utilsScript: "<?php echo get_template_directory_uri(); ?>/intl-tel-input/build/js/utils.js",
     geoIpLookup: function(callback) {
     $.get("https://ipinfo.io", function() {}, "jsonp").always(function(resp) {
       var countryCode = (resp && resp.country) ? resp.country : "";
       callback(countryCode);
     });
  },
     initialCountry: "auto"
    }).addEventListener('countrychange', function() {
   $("#country_code").value = "changed"
  });;

    $('#verify').attr('disabled','disabled');
    $("#mobile").on('input', function() {
     if ($("#mobile").intlTelInput("isValidNumber")) {
   $('#verify').removeAttr('disabled');
   $("#country_code").innerHTML = "changed"
     } else {
      $('#verify').attr('disabled','disabled');
     }

    });

    $("#register-form").submit(function() {
  $("#mobile").val($("#mobile").intlTelInput("getNumber"));

 });
});
</script>

What do you mean by 'doesnot work.' Where/how the event was triggered in your code? — Tushar Gupta, Jan 31 '19 at 01:38
it doesn't trigger anything unfortunately. The intention is that when I change the country changes on the #mobile field (which is the int-tel-input one) that the text field below it changes text. The event isn't triggered at all. — Bec Martin, Jan 31 '19 at 03:16

score 3 · Answer 1 · edited Mar 10 '21 at 21:16

Maybe, it has been months since you asked this question, below is the solution.

You misunderstood the addEventListener. This could be a function of any other Javascript framework. But not jQuery's.

User the below code as a script after the initialization. You can do what your you want with countryData.dialCode which gives you the country code.

jQuery("#mobile").on('countrychange', function(e, countryData){
    console.log(countryData.dialCode);
})

Below is the sample countryData which the intlTelInput returns.

{ areaCodes: null, dialCode: "44", iso2: "gb", name: "United Kingdom", priority: 0 }

My working version is (this is based on with jQuery library version of Intelinput)

var mobile_with_country_code = '<?php echo $mobile_with_country_code; ?>';
        
        var mobile_number_input = document.querySelector("#mobile");

        mobile_number = window.intlTelInput(mobile_number_input, {
            initialCountry: "ae",
            separateDialCode: true,
            preferredCountries: ["ae","bh","kw","om","qa","sa"],
        });

        if(mobile_with_country_code != ''){
            mobile_number.setNumber(mobile_with_country_code);
        }

        jQuery('#country_code').val(mobile_number.getSelectedCountryData().dialCode);

        mobile_number_input.addEventListener("countrychange", function() {
          jQuery('#country_code').val(mobile_number.getSelectedCountryData().dialCode);
        });

I am having the countryData always undefined, I tried to call getSelectedCountryData on the phone input and it wasn't defined also — Mohammad Ali, Mar 10 '21 at 06:19
`jQuery("#mobile").on('countrychange', function(e, countryData){ console.log(countryData.dialCode); })` was giving me undefined in the log. — Mohammad Ali, Mar 10 '21 at 06:33
I had to call `phoneNumberInput.intlTelInput("getSelectedCountryData")` to be able to get the selected country data — Mohammad Ali, Mar 10 '21 at 06:34
@MohammadAli I have edited my answer and appened working version code — Anto S, Mar 10 '21 at 08:17

jquery for intlTelInput can't add event listener

1 Answers1