Jump to content

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

Link to post
Share on other sites
  • 2 weeks later...
  • 5 years later...
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>
Link to post
Share on other sites
  • 10 months later...

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>
Link to post
Share on other sites
  • 5 years later...
  • 7 months later...

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

Link to post
Share on other sites
  • 9 months later...

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

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? 

 

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

 

Link to post
Share on other sites
  • 4 months later...

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 by wimtracking2
Problem Solved
Link to post
Share on other sites
  • 7 months later...

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"

Link to post
Share on other sites

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>

Link to post
Share on other sites
  • 1 month later...

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.

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...
×
×
  • Create New...