intl-tel-input example jquery
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<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>
</body>
</html>