Jump to content

Shortcut for Repeating Javascript For Same Action for Multiple Fields


Recommended Posts

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.  

Link to comment
Share on other sites

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:

image.png

 

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

Hope it helps!

 

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

@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>

 

Link to comment
Share on other sites

  • 7 months later...

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:

image.png

After submission in table:

image.png

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!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...