jbloome Posted November 21, 2021 Report Share Posted November 21, 2021 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. Quote Link to comment Share on other sites More sharing options...
Kurumi Posted November 22, 2021 Report Share Posted November 22, 2021 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! CoffeeLover 1 Quote Link to comment Share on other sites More sharing options...
KlisaN137 Posted November 23, 2021 Report Share Posted November 23, 2021 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 and CoffeeLover 1 1 Quote Link to comment Share on other sites More sharing options...
Kurumi Posted November 23, 2021 Report Share Posted November 23, 2021 Thank you @KlisaN137! Quote Link to comment Share on other sites More sharing options...
jbloome Posted November 29, 2021 Author Report Share Posted November 29, 2021 Thank you! Also, any idea how to implement the same script when editing a record on the Details page? Quote Link to comment Share on other sites More sharing options...
KlisaN137 Posted November 30, 2021 Report Share Posted November 30, 2021 @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> Kurumi and CoffeeLover 2 Quote Link to comment Share on other sites More sharing options...
jbloome Posted December 4, 2021 Author Report Share Posted December 4, 2021 Thank you! Quote Link to comment Share on other sites More sharing options...
Kurumi Posted July 8, 2022 Report Share Posted July 8, 2022 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! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.