Jump to content
perland

Convert Text Number To Phone Format.

Recommended Posts

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>
 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

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.  

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

×
×
  • Create New...