How to Add a Telephone Input Field with Country Code & Flag using Pure JavaScript

[@RishabhTheHertBrekr]

Jeet bhai awesome content❤

[@CodingDesign]

Thank you!. Hope it was helpful.

[@chinnaratthuengklin2179]

Very cool, Thanks a lot bro.

[@CodingDesign]

You're welcome. Hope this video helped you.

[@adeisaac]

So great, I have been looking for this

[@CodingDesign]

Hope it was helpful to you.

[@arathabello4763]

thank you you're so great :D greetings from Chile :)

[@CodingDesign]

Thanks for watching!
Hope you'll show your same ❤ & support in future too.

[@prithviphoenix2]

Thank you

[@fadelghani]

Thank you so much

[@CodingDesign]

You're welcome.
Hope this video was helpful.

[@srutisasmal6589]

Great video, great explanation thanks a lot for this but ,I need some help for the last part, like you said if someone types the code country code the flag should change, can you please help with that?

[@CodingDesign]

There're 2️⃣problems
Problem 1️⃣
If you first enter phone number in your Input field & later if you choose specific option then your "_Input Field's Value_" will be replaced by "_Country Code_".
✅Solution:
⏏Update code
function selectOption() {
input_box.value = phone_code.innerText + input_box.value;
}
Problem 2️⃣
If you enter "COUNTRY CODE" in input field there won't be any ⏏Update (country Flag & Country code).
✅Solution:
input_box.addEventListener('change', updateFlag);
function updateFlag() {
this.value = "+" + this.value;
const matched_code = countries.find(country => country.phone == this.value);
this.previousElementSibling.querySelector('.iconify').setAttribute('data-icon', `flag:${matched_code.code.toLowerCase()}-4x3`);
this.previousElementSibling.querySelector('strong').innerHTML = '+' + matched_code.phone;
};
⚠ But I haven't given extra validation so you can try it yourself.

[@clevertech74]

@@CodingDesign Hello there, first of thanks for this great project. It'll be great if the user types any country code this change or match the flag+country code on the left too. I know you have explained this above with your solution but it does not work for me, I get the error: Uncaught TypeError: this.previousElementSibling is null, it'll be nice if you could test this and let me know if it really works on your end? Thanks.

[@ErrorFrag]

Nice ❤❤

[@CodingDesign]

Thank you!

[@pramodyadeshan]

Thank you!

[@CodingDesign]

You're most welcome.

[@jasonjintao]

how to add () in input blank,i wanna like this (+123),not like this +123

[@CodingDesign]

Within "selectOption" function you can update code
input_box.value = `(${phone_code.innerText})`;

[@moao3661]

bueno tutorial

[@worldMAINs]

Hello, thanks for the video. I'm looking to implement in WordPress and need your help. Thank you in advance for your collaboration!

[@CodingDesign]

Right now I'm sorry to inform you that I won't be able to help you. I'm busy with my college exams.