javascripthtmljqueryformsintl-tel-input

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


I'm new on javascript. I want to create form with two fields: phone number and country. I want to separate them on my database. How can i get country value from intl-tel-input?

For example:

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

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

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


Solution

  • <!-- REQUIRED CDN  -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"
    crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.min.css"
    crossorigin="anonymous" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js" crossorigin="anonymous"></script>
    
    <input name="phone" type="text" class="form-control mb-2 inptFielsd" id="phone"
    placeholder="Phone Number" />
    
    <label>Country</label>
    <input id="country" type="text" name="country">
    
    <script>
        var input = document.querySelector("#phone");
        window.intlTelInput(input, {
            separateDialCode: true,
            customPlaceholder: function (
                selectedCountryPlaceholder,
                selectedCountryData
            ) {
                return "e.g. " + selectedCountryPlaceholder;
            },
        });
      
        var iti = window.intlTelInputGlobals.getInstance(input);
    
        input.addEventListener('input', function() { 
          var countryName = iti.getSelectedCountryData().name;
          document.getElementById('country').value = countryName;
        });
    </script>