PDA

Click to See Complete Forum and Search --> : Phone Number field with ()- symbols already there

kelemvor
05-20-2003, 03:12 PM
I've seen some scripts for validating a phone number but I haven't seen any that work really well as far not allowing anything but numbers and having the box already set up with the particular symbols.

I want to have a box that when the page is loaded will already have this text in the box: ( ) -
So there is a ( then 3 spaces then the ) then 3 spaces then the -

Then when the user clicks in the box it shoudl put the cursor next to the ( so when they type the first 3 numbers it will fill in between the () signs. Then after the 3rd it shoudl jump over the ) and be ready for more, etc.

Any time a non-Number is entered it should NOT allow it to get put in. Mainly any letters or symbols.

Then the main thing is when you backspace to delete an entry, it should work in reverse and leave the (, ), - alone and just remove the numbers.

Anyone have anything like that?
khalidali63
05-20-2003, 03:30 PM
Its an overkill to do it the way you are suggesting,what you can have is have 2 text fields
one that max length is set to 3 for area code and the other for the zon maxlength 3 and the last for the number maxlength 4
kelemvor
05-20-2003, 03:31 PM
Yeah I thought of that too. Might be the safest way to do it I guess.

Is there a real easy way to have it automatically move the cursor to the next field when they enter the required numbers in the boxes if I do it that way?

So if I type in 222 it then jumps to the next box, 555, jumps to the next box, 1212 so they don't have to hit tab or click every time?
Charles
05-20-2003, 09:09 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<form action="">
<div>
<label>Phone Number<br>
<input type="text" size="3" onkeyup="if (this.value.length == 3) this.form.elements[1].focus()">-<input type="text" size="3" onkeyup="if (this.value.length == 3) this.form.elements[2].focus()">-<input type="text" size="4"></label><br>
<input type="submit">
</div>
</form>
khalidali63
05-20-2003, 10:03 PM
Charles' solution is nice,just make these changes though.

replace size with this
style="width:24px;" for 3 digit fields and
style="width:32px;" for 4 digit one.

and add maxlength="3" to 3 digit fields and

maxlength="4" to 4 digit field
Charles
05-21-2003, 05:07 AM
Originally posted by khalidali63
replace size with this
style="width:24px;" for 3 digit fields and
style="width:32px;" for 4 digit one.

and add maxlength="3" to 3 digit fields and

maxlength="4" to 4 digit field I'm curious, Why?
kelemvor
05-21-2003, 07:17 AM
I ended up doing about what Charles said once I realized I could do it that way...

<input type="text" name="Phone_AreaCode" size="3" maxlength="3" onKeyUp="if (this.value.length == 3){document.FrontPage_Form1.Phone_Prefix.focus()}">

<input type="text" name="Phone_Prefix" size="3" maxlength="3" onKeyUp="if (this.value.length == 3){document.FrontPage_Form1.Phone_Number.focus()}">

<input type="text" name="Phone_Number" size="4" maxlength="4>

Thanks
khalidali63
05-21-2003, 09:45 AM
the size attribute does not limit user from entering more characters then the size,
e.g if the size="3"
the user still can enter way more character and the space where you can enter the chars will be at least 5 character wide.
with the max length it will limit the user to the said number of chars in the field.


Originally posted by kelemvor
I ended up doing about what Charles said once I realized I could do it that way..............................


Thanks for implying that my suggestion did not help you squat..:-),
Hiwever,thats ok..since we all do help people here cus we want to ..:D
kelemvor
05-21-2003, 09:47 AM
I think he was asking about using the style="width:24px;" instead of the size=.

And I had already figured out I could do it this way before you posted so you don't need to get all defensive....
khalidali63
05-21-2003, 10:31 AM
He would understand from my response what it means(setting width with style exactly as much as many chars you'd want to display in the field)..it will be few yrs for you to get to that level..

peace..:-)
kelemvor
05-21-2003, 10:36 AM
That level of being Anal? I hope I never get there. Sorry.

Setting maxlength makes the characters stop and if there's a tiny bit of white space after the 3rd number, oh well.
khalidali63
05-21-2003, 10:46 AM
the choice of your vocabulary tells me that you are clearly a learned person..I guess we are no match niether for scripting nor the language...
kelemvor
05-21-2003, 01:11 PM
Now that we're clear on that subject, I'll go back to coding my pages.

Thanks for the help.
jalarie
05-22-2003, 03:09 PM
You might like the way I did it on the "Samples of my work > Order Form" page at my site. It doesn't matter what the user enters, my phonfmt1.js routine recognizes it and returns the format that I want. If you'd like a copy, please e-mail me directly at jalarie@umich.edu and ask for 'phonfmt1.js' by name. My site address is:

http://spruce.flint.umich.edu/~jalarie/
kelemvor
05-22-2003, 04:08 PM
Just sent you an email. No idea how you coded it but I had another thought.

1) Take anything entered in the phoen number field and put it in a variable
2) Filter the variable and pull out anything that's NOT a number
3) Delete the first digit if it's a 1
4) Count remaining digits and if not 10 prompt for a copmlete Phone number including area code.
5) Once digits are correct, reformat it putting the (, ), and - back in.

Is that close to how you did it? Just curious.
jalarie
05-23-2003, 07:11 AM
kelemvor, no.

First, I replace all upper-case letters with corresponding telephone numbers. "A," "B," and "C" become "2" because the telephone keypad containing those letters generates a "2" when dialed, and "DEF" become "3," etc. "Q" and "Z" become "1" and "0" respectively, just because I say so. This conversion allows the subroutine to process such things as "1-800-2RAMADA" or "1-800-THE-ROOF."

The routine has a "strict" switch. If set to "yes," the user must enter valid NANP (North American Numbering Plan) telephone numbers with only the "standard" delimiters in the standard positions. Set it to "no" and it will drop all illegal characters and allow delimiters in strange positions. This allows entries like "1~800~DEAD~DOG." Notice the non-standard delimiters and that the third delimiter is in a non-standard location.

Next it checks for a lower-case "x" to pull off any extension numbers. Note that "x" is the only lower-case letter recognized; the conversions in step #1 only apply to upper-case letters.

Then I run through 17 regular-expression checks to find which incomming format was used. Remember that the extension is currently in a separate variable, so I'm actually checking for 34 possible formats, two at a time.

At this point, I either have a valid 10-digit telephone number with possible extension, or I generate an error message and give up.

Finally, I look at what format you requested and return the number in that format.

The routine also allows you to specify a default area code so that the user may enter "local" numbers.