Jump to content

Recommended Posts

JavaScript Solution: Format phone number

Feature Description:
This JavaScript solution shows how to format an entered phone number as (XXX)-XXX-XXXX  in a Submission Form.

 

Implementation:
This solution can be used "as-is", without any changes if

a. It is used in a Submission Form DataPage.
b. There is a text field in the table called "Phone"
.

To use this solution copy and paste the code below, inside the HTML Footer section of the Form using the Caspio Bridge DataPage Wizard.

 

<SCRIPT LANGUAGE="JavaScript">
var arrEl = Array.from(document.querySelectorAll('#InsertRecordPhone1, #InsertRecordPhone2, #InsertRecordPhone3'));
 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>

Tips for Customization

To customize this script to be used on an Update WebForm or a Details page of a Report DataPage, replace the prefix "InsertRecord" with "EditRecord" in the code. And make sure the field is not "Display Only" because this script is used for input fields.

 

Tested Browsers
This JavaScript solution was tested on the following platforms and Internet Browsers only.
# MS Windows - IE 10, Firefox 23.0.1, Chrome 29.0.1547.57, Safari 5.1.7
# Macintosh # Firefox 3.6.22, Safari 5.1.7

Disclaimer: Use these JavaScript solutions at your own risk! They are provided to assist you in the customization of your programs and while we believe they work properly, by using them you accept all responsibility about them and confirm that they are not a feature of Caspio's platforms and as such are provided "as is" without any warranties, support or guarantees.

 

 

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.

×
×
  • Create New...