getNumber doesn't pull the right instance if multiple instances on the page

[armyofda12mnkeys]

So i use code thats similar to this example: http://jackocnr.com/lib/intl-tel-input/examples/gen/national-mode.html to get the phone # plus the country dialing code so we can save the full phone to our database (the difference is Im using multiple instances of intl-tel-input vs that slightly simpler example... and I'm not using nationalMode which I think shouldn't make a difference): https://dl.dropboxusercontent.com/u/36600570/phone/extract_int_phone/index.html

Lets say I land on the page and the 1st field is set to US which I dont change; I change the 2nd field to UK; and I change the third field to MX.

When I type in the 1st field (the US one), i get nothing back from getNumber. When I type in the 2nd field (the UK one), i get nothing back from getNumber. When I type in the last/3rd field (the MX one), i get the correct value for the 3rd field back from getNumber and it gets displayed on the page via that onchange code. When I go back and type in the 2nd field, i get the incorrect value back from getNumber (gets the 3rd field's getNumber value). When I go back and type in the 1st field, i get the incorrect value back from getNumber (gets the 3rd field's getNumber value).

Any idea why the wrong instance is gotten? Guessing this is a bug. I need to use it on many forms where we collect 2 phone inputs like Cell Phone vs House Phone so let me know if its a easy fix. Thanks, Ari

P.S. I'd like to contribute a change I made to intl-tel-input that I had to put in for our requirements that might be useful for some people... I made it so there is an option to show the Country Dialing Code, so the user knows after picking their flag not to enter their dialing code: https://dl.dropboxusercontent.com/u/36600570/phone/show_country/index.html Should I fork and commit my change? or dont think want to integrate that feature into your build?

[jackocnr]

Hi there, I've looked at your code, and this is the problem:

var intlNumber = input_phone.intlTelInput("getNumber");

This will only ever get the number for the last instance of the plugin, because you're calling it on your input_phone variable, which is actually all 3 inputs. It may work if you change that line to use $(this) instead of input_phone, but I haven't tested that. Alternatively, you just need to use a different selector for each of the 3 inputs, so you can call getNumber on the right one.

Also unless you want to display the full international number to the user as they type, there is no need to update the full number on each keyup event - instead you could just put that same code in a submit handler, so you only run it once: when the user submits the form.

[jackocnr]

Also thanks for the suggestion of the new option, but I'm not sure it makes sense. If you want the user to think about country codes, you can set nationalMode to false. The point of nationalMode is that users don't have to think about that stuff. The idea is that the placeholder shows them they can enter a national number.

It could also be slightly confusing because national numbers sometimes take a different form to international numbers (e.g. in the UK, we add an extra '0' prefix to national numbers), so it would look weird to display the country code at the beginning of a national number.

[armyofda12mnkeys]

Hey Jackocnr, Thanks for the quick response jackocnr. really great plugin!

It may work if you change that line to use $(this)

Yes, you right about my variable input_phone. accidentally put that in.. Using $(this) worked.

you can set nationalMode to false.

The only weird thing is nationalMode: false, adds the +44 to the input which is nice but it acts buggy for me ... If using Firefox (36.01) and IE11, the first time I pick UK from the dropdown, the +44 is added, and the text cursor is automatically focused into the input field... but when you start typing you realize it placed the text cursor automatically before the +44. you end up typing something like '7400123456+44' (which then actually changes to Russia since it has a 7 in front) instead of '+44 7400 123456'. if you select UK again in the dropdown a 2nd time, for some reason it adds the text cursor after the +44 in both FF and IE correctly. Not sure why it messes up on the first time. Can you confirm that same happens to you and its a bug?

I set up nationalMode: false on this webpage below to show the issue: https://dl.dropboxusercontent.com/u/36600570/phone/extract_int_phone/fix/index.html

[jackocnr]

Glad we resolved your problem.

And thanks for reporting that bug - would you mind creating a new issue for it?

[jackocnr]

I just pushed a fix for the cursor position in v5.8.2 - maybe give that a try and only open a new issue if you're still having problems.

[armyofda12mnkeys]

Confirming: Thanks it worked for FF and IE11 (hope this comment doesn't reopen the issue).

[jackocnr]

Great, thanks for confirming.

[mcapraveen4082]

Hey,

I'm using this on Laravel Project and using two instance of the input. Now when the field came prefilled then it's showing some css "padding" issue on inputs. Please suggest any possibilities.

[jackocnr]

@mcapraveen4082 that is a known issue: https://github.com/jackocnr/intl-tel-input/issues/909 - we're currently working on a fix