PDA

View Full Version : Form to insert hyphens in phone #



PauletteB
07-27-2002, 06:48 AM
In the following text box / submit form example, I would like the form to automatically insert the hyphens as the user enters the phone number. Any easy way to do this?

<form action="javascript:void(0)" name="testForm">
<table border="0" cellpadding="2" width="300">
<tr>
<td align=center>Phone: <input type="text"
name="dayPhone" value="" size="14" maxlength="14"
> <input type="submit" name="submitButton"
value="Submit"
onClick="void(0)"><br><br>[eg:1-800-555-1212]</td>
</tr>
</table>
</form>

Thank you,
Paulette

A1ien51
07-27-2002, 07:42 AM
here is a quick way, and definitly not the best way to do it.


<html>
<head>
<script>
function CheckIt(X,Y){
tn=Y;
if(Y.length==7){tn=Y.slice(0,3)+"-"+Y.slice(3,7);}
if(Y.length==10){tn="("+Y.slice(0,3)+") "+Y.slice(3,6)+"-"+Y.slice(6,10);}
if(Y.length==11){tn=Y.slice(0,1)+"-"+Y.slice(1,4)+"-"+Y.slice(4,7)+"-"+Y.slice(7,11);}
if(Y.length==12){tn="("+Y.slice(0,3)+") "+Y.slice(4,12);}
X.value=tn;


}
</script>
</head>
<body>
<form name="Phone">
<input type="text" name="Num" onblur="CheckIt(this,this.value)"
</form>
</body>
</html>

PauletteB
07-27-2002, 06:27 PM
Great stuff...
I'll give it a try and let you know.
Thank you.

Regards,

Paulette

Quiet Storm
07-27-2002, 07:31 PM
I've save this from somewhere:

http://www.angelfire.com/mo2/cbch21/TEST/AZ.html



You'd have to clean up the code... :)

adios
07-28-2002, 12:58 AM
Modified this in a hurry so, might [not] work:



<html>
<head>
<title>untitled</title>
<script type="text/javascript" language="javascript">

function getKey(e) {
var kC = e.keyCode ? e.keyCode : e.which ? e.which : null;
if (kC && (kC == 37 || kC == 39)) return false; //arrow keys
}

function formatPhone(e, field) {
var kC = e.keyCode ? e.keyCode : e.which ? e.which : null;
if (kC) {
if (kC == 8) return true; //backspace
var keyChar = String.fromCharCode(kC);
if (!/\d/.test(keyChar)) return false; //numbers only
if (field.value.length == 0 && keyChar == '0') //no area codes begin with zero
return false;
if (field.value.length == 3) field.value += '-';
if (field.value.length == 7) field.value += '-';
}
return true;
}

</script>
</head>
<body bgcolor="coral">
<form>
<span style="position:relative;top:-2px;font:200 12px Arial;color:navy;background:beige;border:1px black solid;padding:1px;">
Enter Phone ( with area code - numbers only ! )</span>
<input type="text" size="12" maxlength="12" name="phone"
onkeypress="return formatPhone(event,this)" onkeydown="return getKey(event,this)">
</form>
</body>
</html>

Adapted from this thread (http://www.codingforums.com/ubb/Forum2/HTML/007403.html), along with some other interesting solutions...

PauletteB
07-28-2002, 07:40 PM
A1ien51, Quiet Storm, adios

Thank you all for the replies. The script I used was the first on by Alien51 (it was the only one posted at the time) and it fitted in my alert-free self validating form which has about ten inputs. I modified the script (obviously) to accommodate the rest of the form.
Works to perfection in NN and IE.
Even the js master would be proud...

Thank you Alien51

Paulette