Search Records - Phone Number Formatting JS not working

[Vvillie]

Hi!

I have been using this  JS Phone Number Formatting script to assist with inserting and formatting phone numbers.  Now I am building a Reports Datapage and want to use the same script to assist with searching for phone numbers so you don't have to put the brackets and so on to search for a record.  But for some reason it is not working and I don't know why.  The Search Input ID is Value1_1 which I have inserted but when I start typing nothing happens. 

If someone can please help, I am still learning JS.

I do apologize if this question has already been asked, I wasn't able to find anyone that has the same problem as me. Thank you for the help.

My Code:

var arrEl = Array.from(document.querySelector('#Value1_1'));

let regExp = /^[0-9]+$/;

arrEl.forEach(function(el) 

{

    el.maxLength = 14;

  

    el.addEventListener('input', function(v_e) 

    {

        if (regExp.test(v_e.key)) {

            this.value = this.value.substr(0, this.value.length - 1);

        return false;

        }

  

        let v_value = (this.value.replace(/[^\d]/g, ''));

        console.log(v_value, this.value);

    

        if (v_value.length >= 7 && v_value.length < 10) {

            this.value = (v_value.substring(0, 3) + "-" + v_value.substring(3, 7) + v_value.substring(7, v_value.length));

        } else if (v_value.length >= 10) {

        this.value = ("(" + v_value.substring(0, 3) + ") " + v_value.substring(3, 6) + "-" + v_value.substring(6, 10) +v_value.substring(10, v_value.length));

        }

    });

});

[cheonsa]

Hi @Vvillie,

You can still use the code here. You just need to change "#InsertRecordPhone1" to "#Value1_1"

 

Hope this helps!

[Meekeee]

Hi! Just an update on this, Caspio has a new Tech Tip called: Format Phone Number in DataPages. You may visit it here: https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/format-phone-number-in-datapages/

Hope it helps!

[Meekeee]

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/