How to set the country code when opening a popup from edit link of a grid?

[swapnilgopal]

IMPORTANT: please note that the autoFormat feature (format-as-you-type) was removed in v8.0.0 - read more here: #346. Please do not open any new issues about this topic.

IMPORTANT: we use libphonenumber for formatting and validation - if your issue relates to one of these things, please check their test site first and if you see the problem there please file an issue with them instead: https://rawgit.com/googlei18n/libphonenumber/master/javascript/i18n/phonenumbers/demo-compiled.html

Steps to reproduce

1. I am able to save the country code in database from a form
   

2. I have a grid where there is a Edit button which opens a modal popup where I want to retrieve the country code
   

3. On click of edit the below pop-up opens up:
   

4. Need to get the country code on the modal popup for the row that I select.

Expected behaviour

Want to display the country code against each record

Actual behaviour

Not able to display the country code with
$("#inputContact").intlTelInput("setCountry", $("#inputCountryCode").val());
I need to call this on click of edit but it gives ".intlTelInput() is not a function" and only gets recognized on load.

Initialisation options

List any options you're using e.g. utilsScript or preferredCountries

[jackocnr]

I'm sorry, I'm totally confused. You say you want to retrieve the country code, and yet you're calling setCountry? Please break this down into really simple steps.

[swapnilgopal]

I have updated the details above, hope this helps in understanding the issue

[jackocnr]

Thanks. It seems in step 3 the plugin is in a broken state, with a grey flag - I'd like to solve this problem first. Please can you post the JS that you're using to initialise the plugin when the modal is opened. And tell me exactly what the phone number value is that you're setting in the input (does it include the international dial code?), and tell me how you're setting it - do you put the value in the input before you init the plugin, or do you call setNumber after you init the plugin?

Oh I just noticed from the table that under the "contact" column, you have the number starting 718. As mentioned in the readme, I highly recommend you store numbers in the full international format (which you can get from calling getNumber when the user has selected a flag and entered their number). This way the number includes the international dial code e.g. +44 for the UK, and so you dont have to store the country info separately. Then when you init the plugin with a full international number, it automatically displays the right country.

[swapnilgopal]

Thank you for the response.

I saved the data with the country code i.e., with the full international format but still on modal popup load I am not able to get the code.
I require it to be set on the click of the Edit link i.e., when the pop-up opens and retrieves data

The data does change but only when I focus on the input field and take the cursor to the end of the field.

Could you please help me with this?

[jackocnr]

I saved the data with the country code i.e., with the full international format but still on modal popup load I am not able to get the code.

What do you mean when you say you are not able to get the code? What are you trying to do? In your screenshots it looks like the country is being selected correctly now. If you want to get the currently selected country data you can use getSelectedCountryData method.

[swapnilgopal]

I want to display the country for which I have saved the contact.

For example, I have a number saved for UK as +447113456789 which is displayed in the row and I click on edit button of the grid for that respective row the modal pop-up opens but the country code is set as US by default which should be UK.

As per your suggestion, I tried using getSelectedCountryData method as well.

[jackocnr]

Haha this is all so confusing. Let's please stick to this one example of a UK number which includes the intl dial code. Please show me the code you're using to init the plugin when you open the modal, and a screenshot of the modal once the plugin has initialised.

[swapnilgopal]

Doc2.docx
Could you please take a look at the attached file

[naingyy]

Hi @swapnilgopal

I think you also need to save "iso2" to database.So you can set country when you edit like
$('#country').intlTelInput("setCountry", iso2);

iso2 is country code from your database.

[jackocnr]

@swapnilgopal I can't read docx files. Please paste the code here directly.

[swapnilgopal]

Screen 1 when the record saves:

Screen 2 where we see the saved record:

Pop-up on Edit link button click: (default country is set)

After taking the cursor till the end: (country code changes whereas it should change on load of pop-up itself)

Code: I need to get the number on click of edit link button but if I write the code there it gives me not a function error. I am only able to write the code on load.

[jackocnr]

In your ajax success callback, you're setting the phone number input value directly. Instead you should use the plugin's setNumber function.

[riliwanrabo]

@swapnilgopal How were you able to get this to work in a mobile

[aruljayaraj]

@swapnilgopal Please update your code on ajax success like $("#inputContact").intlTelInput("setCountry", "gb");
Here gb is your country code from your database. It would work in mobile as well.

[aolamer]

You can use the option:

hiddenInput: Inject a hidden input with this name, and on submit, populate it with the result of getNumber.
hiddenInput: "mobile",
Where mobile is your input name.

[sumayyajahan]

Can i get the full code

[lil-id]

Hello swapnilgopal
I will give you my code sample, hope this can help you

index.html

<div class="form-group">
     <label>WhatsApp Reservation</label>
     <input id="wa_reservation" type="text" class="form-control" name="wa_reservation" value="{{ $myVar->wa_reservation or old('wa_reservation')}}">
     <span id="valid-msg" class="hide" style="color: #00C900;">✓ Valid</span>
     <span id="error-msg" class="hide" style="color: #c90000;"></span>
</div>

<script>
const phoneInputField = document.querySelector("#wa_reservation");
    const errorMsg = document.querySelector("#error-msg");
    const validMsg = document.querySelector("#valid-msg");
    const errorMap = ["Invalid number", "Invalid country code", "Too short", "Too long", "Invalid number"];

    const phoneInput = window.intlTelInput(phoneInputField, {
    preferredCountries: ["id"],
    utilsScript: "../../../../admin/js/utils.js",
    });

    const reset = function() {
        phoneInputField.classList.remove("error");
        errorMsg.innerHTML = "";
        errorMsg.classList.add("hide");
        validMsg.classList.add("hide");
    };

    phoneInputField.addEventListener('blur', function() {
    reset();
    if (phoneInputField.value.trim()) {
        if (phoneInput.isValidNumber()) {
        validMsg.classList.remove("hide");
        } else {
            phoneInputField.classList.add("error");
        const errorCode = phoneInput.getValidationError();
        errorMsg.innerHTML = errorMap[errorCode];
        errorMsg.classList.remove("hide");
        }
    }
    });

    // auto format country number e.g +62 for Indonesia
    $(document).ready(function() {
        $('.iti__flag-container').click(function() { 
          var countryCode = $('.iti__selected-flag').attr('title');
          var countryCode = countryCode.replace(/[^0-9]/g,'')
          $('#wa_reservation').val("");
          $('#wa_reservation').val("+"+countryCode+" "+ $('#wa_reservation').val());
       });
    });

    // on keyup / change flag: reset
    phoneInputField.addEventListener('change', reset);
    phoneInputField.addEventListener('keyup', reset);
</script>

[JBerriosG]

@jackocnr Excuse me, exist some way to change the dial code that appears in the dropdown? for example: instead of "+56" could be "+569" to Chile.

[etkinss]

$('.country').each(function () {
var dialCode = $(this).attr("data-dial-code");
var countryCode = $(this).attr("data-country-code");
if ("+" + dialCode === "your country code") {
$(".your input class").intlTelInput("setCountry", countryCode);
}
});

[ask4alikhan]

Hi @jackocnr, Thank you for this wonderful plug-in! I am using this on a salesforce communities page. I have a list of countries and one of them is missing in intl-tel-input. How can I add them + their flags?
Artsakh | 374 47, 374 97

[jackocnr]

@ask4alikhan your question is off-topic, please create a new issue for this.