Phone Number Entry in An HTML Form

[chornbeck]

I am taking phone numbers through an HTML form but am having a few issues. I have a pretty good idea on how to fix them, I just need a little coding help..

I want the phone number to be taken in the form in three boxes, one for area code, excahnge, and last 4. I do not want the "autotab" feature. After the three boxes are filled, I want the three inputs to be fused together into one value for SQL insertion.

I then want to run a JS check on that number to make sure that all 10 characters are numbers, if not, I would like an error message to be displayed in an absolute pixel position on the page (which I will set).

I really appreciate any help anyone can give me, I've been looking around and there are a million ways to validate phone numbers, but I can't find one exactly the way I want it...

Thanks in advance!

[LifeinAsia]

Sounds like you've got it spot on.

My suggestion, use the JS check before concatenating the numbers together. And in addition to the JS check, check again on the processign page before addign to the DB (for those users who have JS turned off).

[opifex]

dont know what you are using to collect the data, but that IS the point where you should check for numbers as noted. might also be a good idea to include a spot for the country code depending on your particular scenario or at least verify the country code from an internal routine based on a "country" input. some phone numbers just dont fit the normal AC (123) city(456) number (7890) routine. examples: some cities in mexico, england, brazil, .....
got bit on this in the past ... didn't allow for "foreign" input and had to re-do everything.
nothing is more aggravating than filling in a form that has "required" fields that will not accept your actual data or dropdowns where your "state" for example doesn't exist because the form is only tailored for a particular country.

[chornbeck]

No, what I'm asking about is the actual code needed to pull this off... Logically, I know exactly what I want to do, just need the code.

BTW, I only want US numbers, so the country thing isn't a prob..

[john_k]

Here are some functions I've used. They include international functions, so just remove those if you don't need them. The CheckKeyPhoneNr function can be set as the event handler on the field.

<!-- 
function formatUSPhoneField(oField) 
{  
 var num=oField.value; 
 oField.value=formatUSPhone(num); 
} 
function formatIntlPhoneField(oField) 
{  
 var num=oField.value; 
 oField.value=formatIntlPhone(num); 
} 
function formatUSPhone(num) 
{ 
 /* 
 * 7181238748 to [phone] 
 */  
 var returnval=num;   
 var re = /[^0123456789]/gi; 
 var numCleaned=num.replace(re,''); 
 if(numCleaned.length!= 10) 
 { 
  // We don't have 10 digits to work with, so just return the input value 
  returnval=num; 
 } else {  
  /* formating phone number here */  
  returnval = '('+numCleaned.substring(0,3)+')'+numCleaned.substring(3,6)+'-'+numCleaned.substring(6,10); 
 } 
 return returnval; 
}  
function formatIntlPhone(num) 
{ 
 /* 
  Strips out any non-phone number characters, but does not attempt to do 
  any further formatting. 
 */  
 var returnval=num;   
 var re = /[^\-0123456789]/gi; 
 var numCleaned=num.replace(re,''); 
 return numCleaned; 
}  
function CheckKeyPhoneNr(bAllowParens) { 
 xval=window.event.keyCode 
 if ((47 < xval && xval < 58) ¦¦ (xval==45) ¦¦ (((xval==40)¦¦(xval==41))&&bAllowParens)) { 
  // Good!  
  } 
 else { 
  window.event.returnValue=false; 
 } 
} 
function validateUSPhone(num,bAllowNull) 
{ 
 var re = /[^0123456789]/gi; 
 var numCleaned=num.replace(re,''); 
 return ((numCleaned.length==10)¦¦((num.length==0)&&bAllowNull)); 
} 
//-->