International telephone input with country flags and dial codes using jQuery

Today we’ll explain to you how to implement international telephone input with country flags and dial codes using jQuery.

It is common functionality to add auto country code in the input field that makes the telephone input field user-friendly.

Using the `intl-tel-input` plugin, we can easily display the telephone input field with the flag and code of the respective country. This plugin used to get all the country flags and country code. By IP lookup, the input will detect the user’s country and automatically sets an example number in that country’s format.

You may also like articles related to jQuery.

1. Get the number of days between two dates using jQuery
2. Create a Modal Popup using jQuery
3. Show and Hide a textbox using JavaScript and jQuery
4. How to implement jQuery select2 multiple select plugin in PHP

Write the following code and run in the browser to check the output.

index.html

  <title>International telephone input with country flags and dial codes using jQuery - Clue Mediator</title>
  <!-- CSS -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/css/intlTelInput.min.css">
  <!-- JS -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/js/intlTelInput.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/js/utils.min.js"></script>



  <div class="container">
    <div class="col-md-8 mt-4">
      <h5>International telephone input with country flags and dial codes using jQuery - <a href="https://www.cluemediator.com/" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h5>
      <input type="text" id="phone">
    </div>
  </div>

  <script>
    var input = document.querySelector("#phone");
    intlTelInput(input, {
      initialCountry: "auto",
      geoIpLookup: function (success, failure) {
        $.get("https://ipinfo.io", function () { }, "jsonp").always(function (resp) {
          var countryCode = (resp && resp.country) ? resp.country : "us";
          success(countryCode);
        });
      },
    });
  </script>

Click here to check more information about the plugin.

Output

Output - International telephone input with country flags and dial codes using jQuery - Clue Mediator

That’s it for today.
Thank you for reading. Happy Coding..!! 🙂