skip to Main Content

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


  1. Chosen as BEST ANSWER

    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:

    $('#phone').on({
          change: function(){
            $(this).css("background-color", "f09");
            $("#dialCode").val($('.iti__selected-flag').attr("title"));
          },
          blur: function(){
            $(this).css("background-color", "pink");
            $("#dialCode").val($('.iti__selected-flag').attr("title"));
          },
          click: function(){
            $(this).css("background-color", "LIME");
            $("#dialCode").val($('.iti__selected-flag').attr("title"));
          }
        });
        $("#dialCode").val($('.iti__selected-flag').attr("title"));
    

  2. you can add a CSS class to distinguish the selected item like this:

    $('.iti__country-list li').click(function(){
            $('.iti__country-list li').removeClass('selected');
            $(this).addClass('selected');
    })
    
    $('#phone').blur(function(){ 
            $("#dialCode").val($('.iti__country-list li.selected').data('dial-code'));
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search