mcates Posted September 11, 2006 Report Share Posted September 11, 2006 I would like to be able to have my employees enter in a phone number but always format it once they click off on the field to (xxx)xxx-xxxx. In addition I have multlple fields like phone, fax and cell. So I would like to be able to apply . I cannot seem to figure out how to do this. Could someone please help me? I know that it an be done with javascript but caspio does not provide much support or scripts of java that i can figure out how to moify the one i have that will do it. REQUEST TO CASPIO: I think it would be helpful to all users of your product if you could provide more example scripts for customization. Or even a subsection dedicated to javascripts... Quote Link to comment Share on other sites More sharing options...
davep Posted September 23, 2006 Report Share Posted September 23, 2006 Unfortunately I'm not a JS expert to answer your question, but there is a collection of JS solutions at http://www.caspio.com/support/jssolution.asp. Perhaps you can find some pointers there. By the way, JS solutions page is linked from the Resources page. Dave Caspio Quote Link to comment Share on other sites More sharing options...
Isabelleg Posted November 21, 2011 Report Share Posted November 21, 2011 I would like to be able to have my employees enter in a phone number but always format it once they click off on the field to (xxx)xxx-xxxx. In addition I have multlple fields like phone, fax and cell. So I would like to be able to apply . I cannot seem to figure out how to do this. Could someone please help me?I know that it an be done with javascript but caspio does not provide much support or scripts of java that i can figure out how to moify the one i have that will do it. REQUEST TO CASPIO: I think it would be helpful to all users of your product if you could provide more example scripts for customization. Or even a subsection dedicated to javascripts... Hi Mike, heres a js to validate a north america phone number format, enjoy ! PS: this code will work if the end-user enter a 10 digits number - you have a field nammed "TEL" - you can add a button in your form to check if the function works : add a html block and paste: <input type="button" value="Click me!" onclick="tel();" /> (once you verified your code, you can hide your button with adding before the button <table style="display:none;"><td> and after the button </td></table> or you can delete it, because the code will be applied once the end-user will click "submit" - then on your footer paste : <SCRIPT LANGUAGE="JavaScript"> function tel() { var message = document.getElementById("InsertRecordTEL").value; // here you get what the end-user typed document.getElementById("InsertRecordTEL").value = (message.replace(/[^\d]/g, '')); // then you strip off all the spaces var message1 = document.getElementById("InsertRecordTEL").value; document.getElementById("InsertRecordTEL").value = ("(" + message1.substring(0,3) + ") " + message1.substring(3,6) + "-" + message1.substring(6,10)); } document.getElementById("caspioform").onsubmit=tel; </SCRIPT> Quote Link to comment Share on other sites More sharing options...
lutzomater Posted September 26, 2012 Report Share Posted September 26, 2012 This code worked well for formatting the phone number me. Is there anyway to modify it so when the field is blank it stays blank? On blank fields I get the () - Quote Link to comment Share on other sites More sharing options...
MayMusic Posted October 1, 2012 Report Share Posted October 1, 2012 You can try to add a if statement to check and see if it is blank. For instance: <SCRIPT LANGUAGE="JavaScript"> function tel() { var message = document.getElementById("InsertRecordTEL").value; // here you get what the end-user typed if (message != "") { document.getElementById("InsertRecordTEL").value = (message.replace(/[^\d]/g, '')); // then you strip off all the spaces var message1 = document.getElementById("InsertRecordTEL").value; document.getElementById("InsertRecordTEL").value = ("(" + message1.substring(0,3) + ") " + message1.substring(3,6) + "-" + message1.substring(6,10)); } } document.getElementById("caspioform").onsubmit=tel; </SCRIPT> jafranklin77 1 Quote Link to comment Share on other sites More sharing options...
nuimage Posted March 22, 2018 Report Share Posted March 22, 2018 Hello MayMusic, I implemented this code to validate a single phone field and it works perfectly! Is there a way to modify this code to validate multiple phone fields? thanks in advance! Quote Link to comment Share on other sites More sharing options...
DefinitelyNot31337 Posted October 31, 2018 Report Share Posted October 31, 2018 Hi, I modified MayMusic's JavaScript code. Please see below. The USAGE of this would be, copy paste this snippet in the footer of your DataPage. Then add/modify the addField lines as needed. <script type="text/javascript"> var fields = []; function addField(id) { var field = document.getElementById(id); field.maxLength = 10; fields.push(field); } function telephize(ev) { fields.forEach( function(elem) { var message = elem.value; message = (message.replace(/[^\d]/g, '')); message = ("(" + message.substring(0,3) + ") " + message.substring(3,6) + "-" + message.substring(6,10)); elem.maxLength = 14; elem.value = message; }); } document.querySelector("form[action*='[@cbAppKey]']").onsubmit = telephize; document.addEventListener("BeforeFormSubmit", telephize); addField('cbParamVirtual1'); addField('InsertRecordYOURFIELD'); addField('cbParamVirtual3'); </script> Hope this helps. Regards, DN31337 Quote Link to comment Share on other sites More sharing options...
Hastur Posted August 1, 2019 Report Share Posted August 1, 2019 Hello! You also may use iMask framework to implement any kinds of masks. Here you can find information related to iMask - https://imask.js.org/ Example: Let's implement the mask: 000-000-0000 To do that you need to follow these steps: 1. Add the "iMask.js" file as APP parameter with the File type. 2. Add the following snippet of code into the header of your datapage: <script src="[@app:iMask/]"></script> <script type="text/javascript"> document.addEventListener('DataPageReady', function (event) { var phoneMask = IMask( document.getElementById('ID_OF_YOUR_INPUT'), { mask: '000-000-0000' }); }); </script> You should use the ID value of your input instead of "ID_OF_YOUR_INPUT". Please find the iMask.js file attached - iMask.js ivan77 1 Quote Link to comment Share on other sites More sharing options...
Elderberg Posted August 1, 2019 Report Share Posted August 1, 2019 Hey Andrew, thanks for this, i'm trying to get this implemented. Can you clarify a few things as i'm not yet successful after following the above the best i could. 1. Does all of the script code go in the header? or does part of it go in the footer? 2. Is it that once the user starts typing numbers into a text field it should automatically be formatted for them visually as they type? or is this something that actions off on submission? Quote Link to comment Share on other sites More sharing options...
Elderberg Posted August 1, 2019 Report Share Posted August 1, 2019 Ok, so i got it to work. so for the benefit of others: 1. All the code can remain in the header. 2. Formatting using the mask happens in real time as the user types 3. Just a tip as to why it wasn't initially working for me: when using a virtual field, say Virtual7 you need to use: document.getElementById('cbParamVirtual7') and NOT document.getElementById('Virtual7') Quote Link to comment Share on other sites More sharing options...
wimtracking2 Posted December 6, 2019 Report Share Posted December 6, 2019 (edited) Hi @Andrew I implemented your iMask framework to format my phone number fields and it worked great. I deployed my datapage into a wordpress site without a hitch. However, when deployed into a Weebly website, it did not work. Other custom javascript is working in the same datapage on the Weebly site. Curious if you have run into this before, know what would cause the issue and if you have suggestions on what I might try to get it to work? Below is the code I implemented and it works when deployed on a wordpress site. <script src="[@app:iMask/]"></script> <script type="text/javascript"> document.addEventListener('DataPageReady', function (event) { var phoneMask = IMask( document.getElementById('EditRecordFax'), {mask: '(000) 000-0000'}); var phoneMask = IMask( document.getElementById('EditRecordOffice_Phone'), {mask: '(000) 000-0000'}); var phoneMask = IMask( document.getElementById('EditRecordOther_Phones'), {mask: '(000) 000-0000'}); var phoneMask = IMask( document.getElementById('EditRecordPrimary_Phone_Number'), {mask: '(000) 000-0000'}); var phoneMask = IMask( document.getElementById('EditRecordCell_Phone'), {mask: '(000) 000-0000'}); var phoneMask = IMask( document.getElementById('EditRecordHome_Phone'), {mask: '(000) 000-0000'}); var phoneMask = IMask( document.getElementById('EditRecordBeeper'), {mask: '(000) 000-0000'}); var phoneMask = IMask( document.getElementById('EditRecordOther_Phone'), {mask: '(000) 000-0000'}); }); </script> I answered my problem - it was a browser update issue. Oi Edited December 6, 2019 by wimtracking2 Problem Solved Quote Link to comment Share on other sites More sharing options...
senicholas Posted July 31, 2020 Report Share Posted July 31, 2020 I added the following to my footer, but nothing happened: <SCRIPT LANGUAGE="JavaScript"> function tel() { var message = document.getElementById("InsertRecordTEL").value; // here you get what the end-user typed document.getElementById("InsertRecordTEL").value = (message.replace(/[^\d]/g, '')); // then you strip off all the spaces var message1 = document.getElementById("InsertRecordTEL").value; document.getElementById("InsertRecordTEL").value = ("(" + message1.substring(0,3) + ") " + message1.substring(3,6) + "-" + message1.substring(6,10)); } document.getElementById("caspioform").onsubmit=tel; </SCRIPT> What am I missing. Field name is "TEL" Quote Link to comment Share on other sites More sharing options...
SinJunYoung Posted August 1, 2020 Report Share Posted August 1, 2020 If you are having issues on the codes and you want an as-is instructions that works well, try these: Quote Link to comment Share on other sites More sharing options...
AtayBalunbalunan Posted August 2, 2020 Report Share Posted August 2, 2020 Can you check if there is an error in the browser's console, senicholas? https://wordpress.org/support/article/using-your-browser-to-diagnose-javascript-errors/ Quote Link to comment Share on other sites More sharing options...
senicholas Posted August 2, 2020 Report Share Posted August 2, 2020 I added the following script and it works great! <SCRIPT LANGUAGE="JavaScript"> function f_a(v_id) { return document.getElementById(v_id); } f_a('InsertRecordTEL').maxLength = 14; f_a('InsertRecordTEL').onkeyup = function(v_e) { 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)); }; } </SCRIPT> Quote Link to comment Share on other sites More sharing options...
JayDub Posted September 14, 2020 Report Share Posted September 14, 2020 Hi - I'm trying to use the iMask framework and my DataPage is being hosted inside a WordPress page. The loading of the JavaScript library is failing with this message in the Chrome Console: Uncaught SyntaxError: Cannot use import statement outside a module and it references the appParameter holding the imask.js file. Anyone have thoughts on what may be causing that? Thanks in advance. Quote Link to comment Share on other sites More sharing options...
sandy159 Posted September 15, 2020 Report Share Posted September 15, 2020 Hello @JayDub, I followed the solution above from this post and it worked perfectly for me in WordPress. Could you please double-check that the names of the parameters are correct? You may also find this article helpful: Troubleshooting Deployment in WordPress Regards Quote Link to comment Share on other sites More sharing options...
JayDub Posted December 29, 2020 Report Share Posted December 29, 2020 Hi @sandy159 I finally got iMask to work. Not sure what the issue was. I re-did all of the steps and this time it worked. I do have a different question, though. And I'm wondering if anyone else has noticed this? The iMask solution works to ensure the user is entering numeric characters, and it adds the "-" automatically between the area code, prefix and last four numbers - all good. However, from what I've found in testing it, it does still allow invalid phone numbers to be submitted because there is no check on whether the user has entered enough characters to make the phone number valid. I tried using the Character Length Min setting on the phone number in the DataPage and set it to 10, however, that still allows a phone number like this: 123-456-78 to be submitted, because it counts the hyphens as characters. Is there a way to modify the mask so that it also will not allow submission of a phone number that is not 10 (numeric) characters long? Quote Link to comment Share on other sites More sharing options...
NailDyanC Posted August 21, 2021 Report Share Posted August 21, 2021 Hi, just to add in the previous comments above, phone formatting is also possible using calculated fields, calculated values or even in Formula fields. You may use this formula: CASE WHEN [@field:Phone_Number] != ' ' THEN '(' + SUBSTRING([@field:Phone_Number], 1, 3) + ') ' + ' ' + SUBSTRING([@field:Phone_Number], 4, 3) + '-' + SUBSTRING([@field:Phone_Number], 7, 4) ELSE [@field:Phone_Number] END Quote Link to comment Share on other sites More sharing options...
PotatoMato Posted October 23, 2021 Report Share Posted October 23, 2021 Just to update this post. Caspio has already created a How-to article for this. You may check this link: https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/format-phone-number-in-datapages/ -Potato Quote Link to comment Share on other sites More sharing options...
Kurumi Posted December 6, 2021 Report Share Posted December 6, 2021 You may also check this post for multiple fields of phone number: Quote Link to comment Share on other sites More sharing options...
futurist Posted June 20, 2023 Report Share Posted June 20, 2023 Hi, you might also want to check this Forum post if you want to enforce the formatting for your phone fields but not make it a require field (allow empty values): 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.