intl-tel-input: TypeError: $(…).intlTelInput is not a function

I’m trying to use intlTelInput for a HTML registration page but I am getting the following error: Uncaught TypeError: $(...).intlTelInput is not a function

Here is the registration view code:


<html>
<head>
<!-- Page for customer registration and submit details to database to associate SSO with company etc -->
    <link rel="stylesheet" type="text/css" href="views/register.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link rel="stylesheet" href="../bower_components/intl-tel-input/build/css/intlTelInput.css">
    <script src="../bower_components/intl-tel-input/build/js/intlTelInput.js"></script>
    <script>
        $("#phoneNumber").intlTelInput();

        // get the country data from the plugin
        var countryData = $.fn.intlTelInput.getCountryData(),
            telInput = $("#phoneNumber"),
            addressDropdown = $("#country");

        // init plugin
        telInput.intlTelInput({
            utilsScript: "../bower_components/intl-tel-input/build/js/utils.js" // just for formatting/placeholders etc
        });

        // populate the country dropdown
        $.each(countryData, function(i, country) {
            addressDropdown.append($("<option></option>").attr("value", country.iso2).text(country.name));
        });
        // set it's initial value
        var initialCountry = telInput.intlTelInput("getSelectedCountryData").iso2;
        addressDropdown.val(initialCountry);

        // listen to the telephone input for changes
        telInput.on("countrychange", function(e, countryData) {
            addressDropdown.val(countryData.iso2);
        });

        // listen to the address dropdown for changes
        addressDropdown.change(function() {
            telInput.intlTelInput("setCountry", $(this).val());
        });
    </script>
</head>

<form name="page1" id="page1" role="form">

<div id="createCasePage1" class="container-fluid">

<div class="col-md-6 col-xs-12">
        <div class="form-group">
	      <label for="phoneNumber">Phone Number:</label>
          <input type="tel" id="phoneNumber" name="phoneNumber" ng-model="createUserObj[0].phoneNumber" class="form-control"  required>
      </div>
    </div>

    <div class="col-md-6 col-xs-12">
      <div class="form-group">
        <label for="country">Country:</label>
        <!--<input type="text" id="country" name="country" ng-model="createUserObj[0].country" class="form-control" placeholder="Country" required maxlength="100" /> -->
              <select id="country" name="country" ng-model="createUserObj[0].country" class="form-control" required></select>
      </div>
    </div>


    <!-- Check valid  inputs and patterns then submit to controller -->
    <button type="submit" id="register" class="btn btn-large" class="registerBtn" ng-click="page1.$valid && createUserFunc()">Register</button>
    <br>
    <br>
</div>
</form>
</html>

I think it’s an issue with jQuery and Angular but I’m not really sure.

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 22 (4 by maintainers)

Most upvoted comments

Fixed Solution: In intlTelInput.js replace .load(function() { … }); To .on(‘load’, function() { … });

anupamadhuri on Aug 7, 2018

I had this issue. Just wrap the entire input code within;

           jQuery(document).ready(function() {	

                            telInput.intlTelInput({
			            initialCountry: "auto",
                                       stuff....

                });  // end docready

TomasHurtz on Jul 5, 2018

$(document).ready(function()
{       
      var input = document.querySelector("#phoneNumber");
      var iti = window.intlTelInput(input, {
          utilsScript:'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.0/js/utils.js',
          initialCountry:"auto",
          separateDialCode:true,
          dropdownContainer:null,
          geoIpLookup: function (callback) {
              $.get({url:"https://ipinfo.io",cache:true}, function () {}, "jsonp").always(function (resp) {
              var countryCode = (resp && resp.country) ? resp.country : "";                  
              this.country+=resp.country;                  
              callback(countryCode);
              });
          }   
       });      
 
    var handleChange = function() {
      //HERE YOU CAN GET THE MOBILE NUMBER
      console.log(iti.getNumber());  
    }

    input.addEventListener('change', handleChange);
    input.addEventListener('keyup', handleChange);
       
  });

bala900 on May 19, 2020