TypeError: $(…).intlTelInput is not a function #631

ryanandrews321 · 2017-09-07T10:15:57Z

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.

The text was updated successfully, but these errors were encountered:

jackocnr · 2017-09-07T10:29:27Z

You're calling $("#phoneNumber") before the page has loaded, so that wont work. You need to wrap that code in jQuery's document ready callback. Or move that script code to the end of the body.

ryanandrews321 · 2017-09-07T10:59:53Z

I have now moved it around to this:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="views/register.css">
</head>
<body>
<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>
    <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>
</form>
</body>
</html>

Still throwing the same error?
Can you show a working way to do it?

jackocnr · 2017-09-07T11:07:59Z

If you reproduce the issue in a codepen I will take a look.

ryanandrews321 · 2017-09-07T12:29:26Z

Can I send you a link to the github repository?

jackocnr · 2017-09-07T12:46:21Z

No, I need to see it up and running to debug it.

fakerLinXiao · 2017-12-12T11:55:41Z

same here, i used @types/ tel input.

newgenesys · 2017-12-28T11:16:18Z

Facing the same issue

simonsviper · 2018-04-05T06:31:28Z

I'm also having the same issue.

Sakvojage · 2018-05-31T05:37:59Z

Same here. Yii2 with borales\extensions\phoneInput\PhoneInput

TomasHurtz · 2018-07-05T01:30:56Z

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

           jQuery(document).ready(function() {	

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

                });  // end docready

A-Sahrawat · 2018-07-08T10:00:36Z

This is the conflict issue with existing prototype. Try with add below line of code, hope this will help:

<script>
       jq = jQuery.noConflict();
       <!-- Replace $ with jq and call intlTelInput() function ------->
        use :
       jq("#phoneNumber").intlTelInput();
       insteadof :
        $("#phoneNumber").intlTelInput();
</script>

anupamadhuri · 2018-08-07T07:11:21Z

Having same issue after jquery upgraded to 3.1.1

Urgent!

jackocnr · 2018-08-07T07:51:34Z

If you can reproduce the issue in a codepen (stripping down the code to the simplest possible form that reproduces the error), then I'm happy to take a look.

A-Sahrawat · 2018-08-07T08:05:16Z

May you please share your code sample.

anupamadhuri · 2018-08-07T09:20:31Z

at the end of page

A-Sahrawat · 2018-08-07T09:25:44Z

please share all code sample with html too.

anupamadhuri · 2018-08-07T09:33:51Z

<div class="row col-sm-12">
    <div class="form-group">
        <label for="mobileNumber" class="col-sm-3 control-label">
            Mobile Number
        </label>

        <div class="col-sm-8 phone-parent-container">
            <div class="phone-number-container" style="display: flex;">
                <input type="text" name="countryCode" value="+1" class="form-control phone-code"
                       id="PhoneCountryCode">
                <input type="text" name="mobileNumber" value="" class="form-control" id="mobileNumber">
            </div>
        </div>
    </div>
</div>

</div>

anupamadhuri · 2018-08-07T10:17:40Z

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

brada1703 · 2018-11-05T15:14:10Z

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

Where do you see this? I can't find this particular code in the file that you mentioned "intlTelInput.js". Note that I am using v14.0.4

ronjb04 · 2018-11-15T08:17:56Z

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

i can't find this too in v14.0.5

ishafayshahid · 2019-10-26T15:10:52Z

Actually i'm using two input in form-group but when i'm going to use help-block it's working if any of two option is filled or select but i want it two working with particular input.

.....

I don't wanna use intlTelInput.js

bala900 · 2020-05-19T00:14:07Z

$(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);
       
  });

jackocnr closed this as completed Sep 7, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TypeError: $(…).intlTelInput is not a function #631

TypeError: $(…).intlTelInput is not a function #631

ryanandrews321 commented Sep 7, 2017 •

edited

jackocnr commented Sep 7, 2017

ryanandrews321 commented Sep 7, 2017

jackocnr commented Sep 7, 2017

ryanandrews321 commented Sep 7, 2017

jackocnr commented Sep 7, 2017

fakerLinXiao commented Dec 12, 2017 •

edited

newgenesys commented Dec 28, 2017

simonsviper commented Apr 5, 2018

Sakvojage commented May 31, 2018 •

edited

TomasHurtz commented Jul 5, 2018 •

edited

A-Sahrawat commented Jul 8, 2018

anupamadhuri commented Aug 7, 2018

jackocnr commented Aug 7, 2018

A-Sahrawat commented Aug 7, 2018

anupamadhuri commented Aug 7, 2018

A-Sahrawat commented Aug 7, 2018

anupamadhuri commented Aug 7, 2018 •

edited

anupamadhuri commented Aug 7, 2018

brada1703 commented Nov 5, 2018

ronjb04 commented Nov 15, 2018

ishafayshahid commented Oct 26, 2019

bala900 commented May 19, 2020 •

edited

TypeError: $(…).intlTelInput is not a function #631

TypeError: $(…).intlTelInput is not a function #631

Comments

ryanandrews321 commented Sep 7, 2017 • edited

jackocnr commented Sep 7, 2017

ryanandrews321 commented Sep 7, 2017

jackocnr commented Sep 7, 2017

ryanandrews321 commented Sep 7, 2017

jackocnr commented Sep 7, 2017

fakerLinXiao commented Dec 12, 2017 • edited

newgenesys commented Dec 28, 2017

simonsviper commented Apr 5, 2018

Sakvojage commented May 31, 2018 • edited

TomasHurtz commented Jul 5, 2018 • edited

A-Sahrawat commented Jul 8, 2018

anupamadhuri commented Aug 7, 2018

jackocnr commented Aug 7, 2018

A-Sahrawat commented Aug 7, 2018

anupamadhuri commented Aug 7, 2018

A-Sahrawat commented Aug 7, 2018

anupamadhuri commented Aug 7, 2018 • edited

anupamadhuri commented Aug 7, 2018

brada1703 commented Nov 5, 2018

ronjb04 commented Nov 15, 2018

ishafayshahid commented Oct 26, 2019

bala900 commented May 19, 2020 • edited

ryanandrews321 commented Sep 7, 2017 •

edited

fakerLinXiao commented Dec 12, 2017 •

edited

Sakvojage commented May 31, 2018 •

edited

TomasHurtz commented Jul 5, 2018 •

edited

anupamadhuri commented Aug 7, 2018 •

edited

bala900 commented May 19, 2020 •

edited