How to get country from (intl-tel-input) jquery

Question

how can I get the name of the selected country from intlTelInput? I have a form with an input hidden this would get the name of the country as selected. but I don't know how to do this

inttelephoneinput.js

$(function() {
    $("#mobile-number").intlTelInput({
        preferredCountries: ["us", "co"],
    });
});

template I clarify that the selection of countries and enter number works

<div class="col-md-6 col-lg-6 mg-t-20 mg-md-t-0">
         <input type="code" id="country" vale=" ">
         <label class="form-control-label">Telephone: <span class="tx-danger">*</span></label> <input class="form-control" type="tel" id="mobile-number" name='phone_number' placeholder="e.g. +1 702 123 4567">  
</div>


{% block extra_js %}
<script src="{% static 'template/assets/plugins/telephoneinput/telephoneinput.js' %}"></script>
<script src="{% static 'template/assets/plugins/telephoneinput/inttelephoneinput.js' %}"></script>
{% endblock %}

telephoneinput.js https://jsfiddle.net/4Ljdw6ek/

Answer 1

Try this

<input type="tel" id="phone">
<input id="getCountry" type="button" value="Get Country Name"/>

and the script

var input = document.querySelector("#phone");
var iti = window.intlTelInput(input, {
// any initialisation options go here
});
  
$('#getCountry').on('click', function()
{
  var cdata = iti.getSelectedCountryData();
  alert(cdata['name']);
});