Jump to content
Sign in to follow this  
mcates

Auto format a phone number field javascript

Recommended Posts

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

Share this post


Link to post
Share on other sites
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>

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

joxi_screenshot_1564640633967.thumb.png.17637f4a3f957e8fc973f9d208b13c18.png

joxi_screenshot_1564640763876.thumb.png.0d8617c314ae174de7db636ef91e65a6.png

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>

joxi_screenshot_1564641838577.png.2a4b3151f3ce192195f5e04ed630ae2c.png

You should use the ID value of your input instead of "ID_OF_YOUR_INPUT".

Please find the iMask.js file attached - iMask.js

Share this post


Link to post
Share on other sites

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? 

 

Share this post


Link to post
Share on other sites

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') 

 

Share this post


Link to post
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...
Sign in to follow this  

×
×
  • Create New...