Dial code is not send with the phone number and can't be handle with php

[martinjinda]

I wanna have a separate select box with dial codes only, without flags (those are removed with CSS) but it never sends the full or event separate dial code to PHP code. I read many issues about this issue but I couldn't find any solution which would work fe. My form it's sent with AJAX. If anyone could help it would be nice.

Network parameter sent to PHP:

Dump of form variables in PHP:

Steps to reproduce

1. Install intl plugin with webpack as in docs
2. Set separateDialCode to true
3. And try to handle full phone number in PHP

Expected behaviour

having a full number in PHP or in separate values

Actual behaviour

Getting phone number only, without prefix, it's not sending, you can just select and not represented in Network request either

Initialisation options

I tried multiple combinations but once you set separateDialCode to true, you lost the prefix, so I have set up like this:

initialCountry: "auto", preferredCountries: [ 'us', 'gb', 'cz', 'sk', 'de', 'fr', ], separateDialCode: true,

[jackocnr]

Have you tried the hiddenInput option? That will get you the full number including intl dial code. But note that this only works with valid numbers.

[martinjinda]

I've tried, but it's empty after I send the form.

[jackocnr]

That's not a valid number. The library we use libphonenumber can only put together the full number if it's valid. So you either need to do client side validation before submitting the form, or handle this case on the backend.

It should work fine if you try it with a valid number.

[martinjinda]

I tried it with a valid number and have the same result. But I found that if I write a full number with prefix as well to the phone field it can be changed with the select box, but not everyone fills both fields. I will try always to append the prefix in the field phone or create my own select box. It can't send the full number if the dial is separated.

[jackocnr]

I tried it with a valid number and have the same result.

This shouldn't happen. What was that valid number?

Having thought about it though, I do think that if separateDialCode and hiddenInput are both enabled, then we should add a second hidden input for the international dial code, which also gets populated on submit. I don't have time to look into this myself right now, but would be open to a PR to add this functionality.

[prabhakar1994]

The below code will help you to get the country code..

$(document).ready(function()
    {
        var child0 = document.getElementsByClassName("iti__selected-dial-code");
        var selectedDialCode = child0[0].innerText;
      $("#iti-0__country-listbox .iti__country").click(function()
      {
        var dialcode = $(this).attr("data-dial-code");
        var mobileno = $("#socialstel").val();
        var rep_dialcode = mobileno.replace("+"+selectedDialCode,'');
        var oldCountryCode = getCookie('selectedCookieCode');
        replaceExtra    = rep_dialcode.replace("+"+oldCountryCode,'');
        var fullcontactno = "+"+dialcode+replaceExtra;
        $("#socialstel").val(fullcontactno);
        setCookie('selectedCookieCode',dialcode,1);
      });
    });
    
    function setCookie(name,value,days) 
    {
        var expires = "";
        if (days) 
        {
            var date = new Date();
            date.setTime(date.getTime() + (days*24*60*60*1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + (value || "")  + expires + "; path=/";
    }

    function getCookie(name) 
    {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for(var i=0;i < ca.length;i++) 
        {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1,c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
        }
        return null;
    }

[Ladylain]

@martinjinda , Hello,

i don't know if you still need an anwser, but i was also searching for an answer for the same problem, I'm using a cms on Laravel, and all saving request are Ajax powered. but i have solved mine like this :

i have add an event listener on my input "blur" event, and i have also add an hiddenInput and when the event fires, i change the value of the hiddenInput with the getNumber method to get the number with dialcode.

    // on blur: validate
    input.addEventListener('blur', function() {
        $('input[name="myHiddenInput"]').val(iti.getNumber());
    });

hope it can help someone :)

best,

[Forchapeatl]

@Ladylain Thank you for your response, Just to clarify , you have an extra html field of this format ? <input type = "hidden" name = "myHiddenInput" value=" " /> or please for the desired HTML code if my assumptions are wrong.

[ashishmishraoft]

For getting the Dial code with the phone number in the hidden full_phone just add utils.js and nothing else

[jackocnr]

Thanks @ashishmishraoft that's a really good point. As per the readme, the hiddenInput option requires the utils script to be loaded using the utilsScript option. And I notice the op isn't using that option in their initial post. So I think that will solve the problem. I'll close this for now, but please feel free to comment if you're still experiencing problems even with the utils script loaded.