Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
swapnilgopal opened this issue Feb 15, 2018 · 21 comments
Closed

Comments

@swapnilgopal
Copy link

swapnilgopal commented Feb 15, 2018

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
    image

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

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

  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
Copy link
Owner

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
Copy link
Author

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

@jackocnr
Copy link
Owner

jackocnr commented Feb 16, 2018

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
Copy link
Author

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

image

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

Could you please help me with this?

@jackocnr
Copy link
Owner

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
Copy link
Author

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
Copy link
Owner

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
Copy link
Author

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

@naingyy
Copy link

naingyy commented Feb 20, 2018

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
Copy link
Owner

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

@swapnilgopal
Copy link
Author

image
Screen 1 when the record saves:
image

Screen 2 where we see the saved record:
image

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

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

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.
image

@jackocnr
Copy link
Owner

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

@riliwanrabo
Copy link

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

@aruljayaraj
Copy link

@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
Copy link

aolamer commented Feb 10, 2020

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
Copy link

Can i get the full code

@lil-id
Copy link

lil-id commented Jun 18, 2022

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
Copy link

@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
Copy link

etkinss commented Nov 23, 2023

$('.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
Copy link

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
Copy link
Owner

jackocnr commented May 8, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests