Shortcut for Repeating Javascript For Same Action for Multiple Fields

[jbloome]

I found a great script on Caspio for autoformatting a phone field.  https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/format-phone-number-in-datapages/?_ga=2.155873723.1217058336.1637018735-176705749.1637018735 and I was wondering if someone could help me with the language for adding more than one field  for the var field (e.g. = "InsertRecordBest_Telephone and InsertRecordCell_Telephone) on the same datapage without me having to repeat the script 4 or 5 times which exceeds the HTML character limit for datapage submission forms.  

[Kurumi]

Hi @jbloome - you can only repeat the variables instead of the whole script. Just like this one:

<script>

var field = 'InsertRecordPhone1';
var field1 = 'InsertRecordPhone2';
var field2 = 'InsertRecordPhone3';

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

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

var input2 = document.querySelector('#' + field2);
input2.maxLength = 14;
input2.onkeyup = telephize
input2.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.querySelector('#caspioform').onsubmit = function(e) {
    e.preventDefault();


if (input.value.length >= 14){
this.submit();
} else {
alert('Please input a valid phone number');
input.focus();
}
}

</script>

Result:

 

If you want other solution, you may use this one:

Hope it helps!

 

[KlisaN137]

Hi @jbloome and @Meekeee

We can also use arrays and loops to further reduce the code:

<script>

const fields = ['InsertRecordPhone1','InsertRecordPhone2', 'InsertRecordPhone3'];
const inputs = [];

for (let f of fields){
       inputs.push(document.querySelector('#' + f));
}

for(let i of inputs){
    i.maxLength = 14;
    i.onkeyup = telephize;
    i.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.querySelector('#caspioform').onsubmit = function(e) {
    e.preventDefault();


if (input.value.length >= 14){
this.submit();
} else {
alert('Please input a valid phone number');
input.focus();
}
}

</script>

 

[Kurumi]

Thank you @KlisaN137! 

[jbloome]

Thank you!  Also, any idea how to implement the same script when editing a record on the Details page?

[KlisaN137]

@jbloome for implementing it on Details, instead of 'InsertRecordFIELDNAME', you must use 'EditRecordFIELDNAME', and place the code not in the Footer of the page, but add a new HTML block element just after all other elements, and put the code there.

Also, additional event listener is needed, here is the entire code:

<script>
document.addEventListener('DataPageReady', function (event) {

    const fields = ['EditRecordPhone1','EditRecordPhone2', 'EditRecordPhone3'];
    const inputs = [];

    for (let f of fields){
           inputs.push(document.querySelector('#' + f));
    }

    for(let i of inputs){
       i.maxLength = 14;
       i.onkeyup = telephize;
       i.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.querySelector('#caspioform').onsubmit = function(e) {
        e.preventDefault();


    if (input.value.length >= 14){
    this.submit();
    } else {
    alert('Please input a valid phone number');
    input.focus();
    }
    }
});
</script>

 

[jbloome]

Thank you!

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