JavaScript to Convert Phone Number to E.164 format

[CPCaspio]

Thanks to the Format Phone Number in DataPages how-to article, I've formatted all of my phone numbers to use the US national format of (###) ###-####. This is great for readability; however, I have a downstream integration that requires the E.164 international standard format of +[country_code][subscriber_line]. For example, (123) 456-7890 would become +11234567890. So, I essentially need to strip out all non-numeric characters (including white spaces) and prepend "+1". All of my phone numbers are in the US. This may sound easy, but I'm a citizen developer new to JavaScript so any help would be greatly appreciated. Thanks!

[kpcollier]

How are you capturing the phone numbers? Do they select the country, then type in the full number including area code/subscriber line?

Either way, may I suggest a calculated field instead of JS? Just a thought. 

You could make your phone number field into a Calculated Value form element. Then, use Virtual Fields in place of the real phone number field on your form or wherever you enter this information. Then you can just use something simple in the calculated value to get the results you want. You can get rid of area code and just have the phone number field too.

[CPCaspio]

@kpcollier, thanks for your suggestion. I'd prefer not to break the phone number up into parts because it's lot easier to enter 10 digits in a single field without having to tab/enter/move from field to field. But, I'll keep this in my back pocket if I can't find a JavaScript solution. Thanks!

[Ulensr]

@CPCaspio you can do this with javascript easily

You just need to change the ID of your telephone field  in the following code where I called the field fieldParamTel

var inputTel = document.getElementById("fieldParamTel").value;
inputTel = "+1" + inputTel.replace(/[^0-9a-z]/gi, '');

You can then use the inputTel variable for further processing

Or if you want this value in the form itself

document.getElementById("fieldParamTel").onchange  = function() {changeTel("fieldParamTel")};

function changeTel(field){
var inputTel = document.getElementById(field);
cleanTel = inputTel.value.replace(/[^0-9a-z]/gi, '');
inputTel.value = "+1".concat(cleanTel);

}

 

The latter will remove () - etc and add +1

 

Hope this helps

[CPCaspio]

@Ulensr, I wasn't able to get this to work, but I'm chalking that up to my inexperience with JS. However, I learned enough from it to kludge it together with another script I'm using to make it work. Thx

[Ulensr]

Just make sure the name of your data page field is replace in both cases below

document.getElementById("fieldParamTel").onchange  = function() {changeTel("fieldParamTel")};

 

Then add the script to the data page footer between <script></script>

 

When you then enter the number and change to another field TAB for example , the function triggers

[CPCaspio]

@Ulensr, I mistakenly replaced your placeholder with the wrong value. It should have been "EditRecordrp_phone", but it's working now so thanks!

What I really want to do is use the value from a US national phone number field (rp_phone) displayed & stored as (###) ###-#### to populate a separate E.164 phone number field (rp_e164_phone) formatted & stored as +11234567890. This field will be hidden on the datapage and only used for an integration to send SMS. I realize using an extra field just for different formatting isn't ideal, but it's a quick & dirty solution for now.

Thanks again!

[CPCaspio]

@Ulensr, You can disregard my ask above. Much easier to solve using a formula field on the backend.

[Kurumi]

Hi All - In relation to Caspio's new feature of Worldwide SMS Notifications, if you would like your input phone number fields to be automatically formatted - you can use the International Telephone Input plugin. This JavaScript plugin is used for entering and validating international telephone numbers. It adds a flag dropdown to any input, detects the user's country, displays a relevant placeholder, and provides formatting/validation methods. To know more of the customization, you can check this link: https://github.com/jackocnr/intl-tel-input

Here's a sample result in DataPage:

After submission in table:

Related articles:

https://howto.caspio.com/notifications/sms-notifications/configuring-the-sms-enabled-countries/
https://howto.caspio.com/release-notes/caspio-32-0/

Hope it helps!

[PotatoMato]

Just to add, Caspio has released a new howto article regarding this: https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/enhancing-phone-number-fields-with-formatting-and-validation/