Format Phone on Tabular Report

[Joanne]

Hello,

Can you please provide help with formatting a phone number for an update done in a tabular report?  I have the following code from the footer in a submission form and tried to adapt it in the footer to update it for this tabular report but it doesn't work. 

<SCRIPT LANGUAGE="JavaScript">
var arrEl = Array.from(document.querySelectorAll('#EditRecordPhone, #EditRecordEmergencyPhone, #EditRecordPhone3'));
 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));
  }
 });
});
</SCRIPT>

Thank you!!

[Vitalikssssss]

Hi @Joanne,

the way how you reference fields is incorrect for Inline Edit action of Tabular report and also you need to use a special event to capture the moment then user clicked on Edit/Update button/link.

You may try to use the following snippet, however make sure that name of the fields are correct and have prefix "InlineEdit".

<script>

document.addEventListener('DOMSubtreeModified', function(){

  
   let element = document.querySelector('[id*="InlineEdit"]');

   if (element) {

    let regExp = /^[0-9]+$/;
     
    //Change the name of the fields 
     
    let arrEl = Array.from(document.querySelectorAll('[id*="InlineEditPhone"], [id*="InlineEditEmergencyPhone"], [id*="InlineEditPhone3"]')); 
 
    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, ''));
     
        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));
   }
  });
 });
   }

});


</script>

Hope this helps.

Regards,

vitalikssssss

[Kurumi]

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!

[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]

Hi! Just to add, you may also check this article: https://howto.caspio.com/tech-tips-and-articles/enhancing-phone-number-fields-with-formatting-and-validation/

 

-Potato

[Flowers4Algernon]

Hello! Maybe this forum post could be helpful, as well: