Skip to content

How to get country value from intl-tel-input?

so im new on javascript. I want to create form there is two field, phone number and country. And i want to seperate them on my database. I wonder how can i get country value from intl-tel-input ( ). for example HTML

                        <label>Phone Number</label>
                        <!-- using intl-tel-input -->
                        <input type="tel" name="phone">

                        <!-- how can i get country value automatically here from phone number field? -->
                        <input type="text" name="country">

Anyone can help me figure this out? thanks in advance.


<!-- REQUIRED CDN  -->
<script src=""
<link rel="stylesheet" href=""
crossorigin="anonymous" />
<script src="" crossorigin="anonymous"></script>

<input name="phone" type="text" class="form-control mb-2 inptFielsd" id="phone"
placeholder="Phone Number" />

<input id="country" type="text" name="country">

    var input = document.querySelector("#phone");
    window.intlTelInput(input, {
        separateDialCode: true,
        customPlaceholder: function (
        ) {
            return "e.g. " + selectedCountryPlaceholder;
    var iti = window.intlTelInputGlobals.getInstance(input);

    input.addEventListener('input', function() { 
      var countryName = iti.getSelectedCountryData().name;
      document.getElementById('country').value = countryName;