...

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum