I want to click on input #phone and get the current dial-code from the selected country, and put it in the input #dialCode.
html:
<input id="phone" type="text">
<input id="dialCode" type="text">
jQuery:
// this works fine
$('.iti__country-list li').click(function(){
$("#dialCode").val($(this).data('dial-code'));
})
// but I want, on #phone blur get the above data and put it in dial-code
$('#phone').blur(function(){ ...
UPDATE:
This is the original code:
https://cdpn.io/jonmnoj/fullpage/PoqMrRL?#
The problem is that when I submit, it doesn’t pass the Dial-code: +1, +44, etc.
Also, the phone input, can also change the Dial-code. Ex. I can type +1 or +44, so the drop down " .iti__country-list " is not the only way to select the country code.
I tried a few things based on K-Galalem’s suggestions, but no success either:
$('.iti__country-list li').on({
change: function(){
$(this).css("background-color", "YELLOW");
$('.iti__country-list li').removeClass('selected');
$(this).addClass('selected');
},
blur: function(){
$(this).css("background-color", "BLUE");
$('.iti__country-list li').removeClass('selected');
$(this).addClass('selected');
},
click: function(){
$(this).css("background-color", "GREEN");
}
});
$("#phone").on({
focus: function(){
$(this).css("background-color", "#F09");
$('.iti__country-list li').removeClass('selected');
$(this).addClass('selected');
},
change: function(){
$(this).css("background-color", "#F09");
$('.iti__country-list li').removeClass('selected');
$(this).addClass('selected');
},
blur: function(){
$(this).css("background-color", "LIME");
$("#dialCode").val($('.iti__country-list li.selected').data('dial-code'));
},
click: function(){
$(this).css("background-color", "CYAN");
}
});
2
Answers
Thanks to @freedomn-m suggestions to get the li.selected and to pick the selected directly, I found out that there was actually a selected item in the drop down of the flags, so I selected it directly. I don't know how to give credit though. But here is the code that worked out:
you can add a CSS class to distinguish the selected item like this: