Formatting a numbers field

[DavidBRX]

Greetings,

I discovered the following code on how to format a phone number by placing it in the footer section of a data-page. However, I tried to use this code and tweak it to allow formatting for another field in same data-page where I enter a numeric value like 5654-58-8569.  And so, I'm trying to edit this script so I can use if as follows: xxxx-xx-xxxx but can't seem to make it work.

So I have two questions if I may:

1.  Can I edit the following code to accomplish the above, and ...
2. Can I use both codes separately in the same footer (one for the phone field, the second for the number field as noted)

Here's the code I found (which works perfectly for the phone field):

<script>

var field = 'InsertRecordgpin';

var input = document.querySelector('#' + field);
input.maxLength = 14;
input.onkeyup = telephize
input.onkeydown = telephize

function telephize(v_e) {
// this.value = this.value.replace( /\D+/g, "" ).replace( /([0-9]{1,3})([0-9]{3})([0-9]{4}$)/gi, "($1) $2-$3" ); //mask numbers (xxx) xxx-xxxx

   v_e = v_e || window.event;
    if (v_e.keyCode >= 65 && v_e.keyCode <= 90) {
     this.value = this.value.substr(0, this.value.length - 1);
     return false;
    } else if (v_e.keyCode >= 37 && v_e.keyCode <= 40) {
     return true;
    }
    var v_value = (this.value.replace(/[^\d]/g, ''));
    if (v_value.length == 7) {
     this.value = (v_value.substring(0, 3) + "-" + v_value.substring(3, 7));
    } else if (v_value.length == 10) {
     this.value = ("(" + v_value.substring(0, 3) + ") " + v_value.substring(3, 6) + "-" + v_value.substring(6, 10));
    };
   }

document.addEventListener('BeforeFormSubmit', function(e) {        
       if (input.value.length < 14) {

            e.preventDefault();
                       alert('Please input a valid phone number');                        
                       input.focus();
               }
});
</script>

[CoopperBackpack]

Hello @DavidBRX,

I tested the DataPage using the imask.js (https://imask.js.org/)

This code works on my side:

1) Add the CDN to the DataPage Header (disable the HTML editor before pasting the code)
 

<script src="https://unpkg.com/imask"></script>

 

 

2) Add this code to the DataPage Footer
 

<script>

const element = document.getElementById('InsertRecordnumber_field'); // number_field is the field name that should be relalaced with your field name

const maskOptions = {
    mask: '0000-00-0000',
    lazy: false,
    overwrite: 'shift',
    placeholderChar: 'X'
};

const mask = IMask(element, maskOptions);

</script>

 

In the script:

• use your field name (in this example the field name is 'number_field' and this is the Submission form, so the field ID is 'InsertRecordnumber_field');
• mask restricts the input, '0' stands for 'any digit';
• placeholder character is 'X' in this example.

Please note that the value is submitted with the applied format to the table:

• Empty field
  
• Populated field
  
• Submitted into the Table
  

 

[DavidBRX]

This worked awesomely! 

Thank you sooooooo much for your expertise and valued assistance.

David

[Kurumi]

Hi! Caspio now offers integration with OpenAI, so you can use extensions to leverage AI to update your data based on a prompt. Here's a sample use case to format phone number fields.

Request:
Change the format of the phone number of "[@field:Phone_Number]" to (XXX)-XXX-XXXX or US format.
Return only the final result.

Result:

Change the 'Phone_Number' field to your right field name.

To learn more about Extensions, you can check it here: https://howto.caspio.com/integration/extensions/

 

[ParkLoey]

Hello everyone! For those who are interested in using Extensions, it's available for certain plans:

https://www.caspio.com/pricing/#:~:text=--,Extensions,-Enhance the functionality

But it also can be purchased as an add-on:

https://www.caspio.com/add-on-resources/#:~:text=per 10%2C000 calls-,Extensions actions,-%2415