Convert Text Number To Phone Format.

[perland]

Hello,

 

How can I make an onchnage event trigger a function that converts a number in 1234567890 to (123) 456-7890 format.

 

The function works fine, but the onchange statement does not trigger the function. This is on a single record update form.

 

Thank You.

 

<SCRIPT LANGUAGE="JavaScript">

function phoneFormat(phone) {
phone = phone.replace(/[^0-9]/g, '');
phone = phone.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3");
return phone;
}

document.getElementById('EditRecordPhone_Home').onchange=phoneFormat(document.getElementById('EditRecordPhone_Home').value);
</SCRIPT>
 

[MayMusic]

Refer to this post http://forums.caspio.com/index.php/topic/2692-auto-format-a-phone-number-field-javascript/?hl=phone#entry8567

[perland]

MayMusic,

 

Thank you for your suggestion all worked fine. For a single record update form with a textbox field called Phone_Home, I used the code below placed in the footer:

 

<SCRIPT LANGUAGE="JavaScript">

function tel()
{
 // Read the content of the textbox
var message = document.getElementById("EditRecordPhone_Home").value;
 

//Skip function if textbox is empty, else you will see () -

if (message != "") {
 

// Strip off all the spaces
document.getElementById("EditRecordPhone_Home").value = (message.replace(/[^\d]/g, ''));

var message1 = document.getElementById("EditRecordPhone_Home").value;
document.getElementById("EditRecordPhone_Home").value = ("(" + message1.substring(0,3) + ") " + message1.substring(3,6) + "-" + message1.substring(6,10));
}
}

 

// Call function when value in the textbox changes
document.getElementById('EditRecordPhone_Home').onchange=tel;

</SCRIPT>

 

 

I have three other fields called Phone_Work, Phone_Cell and Phone_Fax. Would you happen to know a single code that can be called for all four fileds. The other option will be to copy the above code 4 times.

 

Thank You again.

[MayMusic]

Then you need to create an array. Try this:

<SCRIPT LANGUAGE="JavaScript">
var o_els = new Array("EditRecordPhone_Work","EditRecordPhone_Cell","EditRecordPhone_Fax") ;

function tel()
{
 // Read the content of the textbox


// var message = document.getElementById("EditRecordPhone_Home").value;
 

//Skip function if textbox is empty, else you will see () -
for (var i = 0; i < o_els.length; i++) {
if (o_els[i] != "") {

var message=document.getElementById(o_els[i]).value;
 

// Strip off all the spaces
document.getElementById(o_els[i]).value = (message.replace(/[^\d]/g, ''));

var message1 = document.getElementById(o_els[i]).value;
document.getElementById(o_els[i]).value = ("(" + message1.substring(0,3) + ") " + message1.substring(3,6) + "-" + message1.substring(6,10));
}
}

 }

// Call function when value in the textbox changes
for (var i = 0; i < o_els.length; i++) {
document.getElementById(o_els[i]).onchange=tel;
}

</SCRIPT>

[wgalliance]

I am currently using the above code on an update form to edit three phone fields and it is working well with one exception:

 

I occasionally will have a customer that will remove a phone number and want to leave that field blank. Currently if this is done the field reverts to showing "( ) -".

 

Is there code that I can add to make this field completely blank if the user decides to delete a phone number previously stored?

 

Thank you.

[MayMusic]

Try to change this part:

for (var i = 0; i < o_els.length; i++) {
document.getElementById(o_els[i]).onchange=tel;
}

to

for (var i = 0; i < o_els.length; i++) {

if (o_els[i]){
document.getElementById(o_els[i]).onchange=tel;
}
}

Let me know how it works ...

[wgalliance]

Thanks! I tried that and it would not work, any other ideas?

[MayMusic]

Can you try again? It does work for me

[wgalliance]

I tried again and it is still not working. Here is my final code with your edit:

 

<script>

 

var o_els = new Array("EditRecordPublicPhone","EditRecordFaxNumber") ;

 

function tel()

{

 // Read the content of the textbox

 

 

// var message = document.getElementById("o_els").value;

 

 

//Skip function if textbox is empty, else you will see () -

for (var i = 0; i < o_els.length; i++) {

if (o_els != "") {

 

var message=document.getElementById(o_els).value;

 

 

// Strip off all the spaces

document.getElementById(o_els).value = (message.replace(/[^\d]/g, ''));

 

var message1 = document.getElementById(o_els).value;

document.getElementById(o_els).value = ("(" + message1.substring(0,3) + ") " + message1.substring(3,6) + "-" + message1.substring(6,10));

}

}

 

 }

 

// Call function when value in the textbox changes

for (var i = 0; i < o_els.length; i++) {

 

if (o_els){

document.getElementById(o_els).onchange=tel;

}

}

 

</SCRIPT>

 

Am I missing something?

[MayMusic]

Can you give me the URL to the page? You can create a copy of the page with these two phone fields only and a sample login

[MayMusic]

Change the code to the following code to remove extra characters when blank

<SCRIPT LANGUAGE="JavaScript">
var o_els = new Array("EditRecordPublicPhone","EditRecordFaxNumber") ;

function tel()
{
 
for (var i = 0; i < o_els.length; i++) {
if (o_els[i] != "" && document.getElementById(o_els[i]).value) {

var message=document.getElementById(o_els[i]).value;
 
document.getElementById(o_els[i]).value = (message.replace(/[^\d]/g, ''));

var message1 = document.getElementById(o_els[i]).value;
document.getElementById(o_els[i]).value = ("(" + message1.substring(0,3) + ") " + message1.substring(3,6) + "-" + message1.substring(6,10));
} else{document.getElementById(o_els[i]).value ="";

}
}

 }

// Call function when value in the textbox changes
for (var i = 0; i < o_els.length; i++) {

document.getElementById(o_els[i]).onchange=tel;

}

</SCRIPT>

 

[wgalliance]

Thank you! This is it!

[MayMusic]

I am glad it helped

[telepet]

I wonder-- is there a way to "live update" the number while it's still being typed in a given field?  Right now the user TABs out of a field, after the code runs, and formats the text.  

[MayMusic]

@telepet

 

Change this line

document.getElementById(o_els[i]).onchange=tel;

 

To:

document.getElementById(o_els[i]).onkeyup=tel;

 

[telepet]

18 hours ago, MayMusic said:

@telepet

 

Change this line

document.getElementById(o_els[i]).onchange=tel;

 

To:

document.getElementById(o_els[i]).onkeyup=tel;

 

Brilliant-- thanks!

[Kurumi]

Hi! Just an update on this, Caspio has a new Tech Tip called: Format Phone Number in DataPages. You may visit it here: https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/format-phone-number-in-datapages/

Hope it helps!

[Kurumi]

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!

[PotatoMato]

Just to add, Caspio has released a new howto article regarding this: https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/enhancing-phone-number-fields-with-formatting-and-validation/