Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

change format of phone# only works once 2

Status
Not open for further replies.
treyhunsucker

treyhunsucker

Programmer
May 16, 2006
60
US
I am working on an HTML form that asks for 2 phone #'s and I like them to be in this format.

(555)-555-5555

The below script is what I've currently been using and it works. I tried changing everything that said "preferred" to "alternate" and having the script in there twice but it didn't work, it typed the # in both boxes.

<head>
<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! -->
<!-- Original: Roman Feldblum (web.developer@programmer.net) -->

<!-- Begin
var n;
var p;
var p1;
function ValidatePhone(){
p=p1.value
if(p.length==3){
//d10=p.indexOf('(')
pp=p;
d4=p.indexOf('(')
d5=p.indexOf(')')
if(d4==-1){
pp="("+pp;
}
if(d5==-1){
pp=pp+")";
}
//pp="("+pp+")";
document.frmPhone.preferred.value="";
document.frmPhone.preferred.value=pp;
}
if(p.length>3){
d1=p.indexOf('(')
d2=p.indexOf(')')
if (d2==-1){
l30=p.length;
p30=p.substring(0,4);
//alert(p30);
p30=p30+")"
p31=p.substring(4,l30);
pp=p30+p31;
//alert(p31);
document.frmPhone.preferred.value="";
document.frmPhone.preferred.value=pp;
}
}
if(p.length>5){
p11=p.substring(d1+1,d2);
if(p11.length>3){
p12=p11;
l12=p12.length;
l15=p.length
//l12=l12-3
p13=p11.substring(0,3);
p14=p11.substring(3,l12);
p15=p.substring(d2+1,l15);
document.frmPhone.preferred.value="";
pp="("+p13+")"+p14+p15;
document.frmPhone.preferred.value=pp;
//obj1.value="";
//obj1.value=pp;
}
l16=p.length;
p16=p.substring(d2+1,l16);
l17=p16.length;
if(l17>3&&p16.indexOf('-')==-1){
p17=p.substring(d2+1,d2+4);
p18=p.substring(d2+4,l16);
p19=p.substring(0,d2+1);
//alert(p19);
pp=p19+p17+"-"+p18;
document.frmPhone.preferred.value="";
document.frmPhone.preferred.value=pp;
//obj1.value="";
//obj1.value=pp;
}
}
//}
setTimeout(ValidatePhone,100)
}
function getIt(m){
n=m.name;
//p1=document.forms[0].elements[n]
p1=m
ValidatePhone()
}
function testphone(obj1){
p=obj1.value
//alert(p)
p=p.replace("(","")
p=p.replace(")","")
p=p.replace("-","")
p=p.replace("-","")
//alert(isNaN(p))
if (isNaN(p)==true){
alert("Check phone");
return false;
}
}
// End -->
</script>
</head>
<form method="POST" action="add_new_insert.php" name=frmPhone>
<body>

<input type=text name=preferred maxlength="13" onclick="javascript:getIt(this)" >
 
Sort by date Sort by votes
OK - I think this is a lot better. The changes:

- I've added an onkeypress event to the inputs, and removed the timer. I don't think the timer was really necessary

- Put in all the semicolon delimiters you missed from the JS, and tidied up the formatting. I renamed a few variables while I was at it.

- Removed the need for 2 copies - it will now work with n inputs.

Some things to note:

- Your HTML is attrocious. You should really tidy it up, put in a DOCTYPE, and get your page validating.

Code: 
<html>
<head>
	<script type="text/javascript">
		function ValidatePhone(textObj) {
			var formattedNumber = '';
			var enteredNumber = textObj.value;
			if (enteredNumber.length == 3) {
				formattedNumber = enteredNumber;
				d4 = enteredNumber.indexOf('(');
				d5 = enteredNumber.indexOf(')');
				if(d4 == -1) formattedNumber = '(' + formattedNumber;
				if(d5 == -1) formattedNumber += ')';
				textObj.value = formattedNumber
			}

			if (enteredNumber.length > 3) {
				d1 = enteredNumber.indexOf('(');
				d2 = enteredNumber.indexOf(')');
				if (d2 == -1) {
					l30 = enteredNumber.length;
					p30 = enteredNumber.substring(0, 4);
					p30 += ')';
					p31 = enteredNumber.substring(4, l30);
					formattedNumber = p30 + p31;
					textObj.value = formattedNumber;
				}
			}

			if (enteredNumber.length > 5) {
				p11 = enteredNumber.substring(d1 + 1, d2);
				if (p11.length >  3) {
					p12 = p11;
					l12 = p12.length;
					l15 = enteredNumber.length
					p13 = p11.substring(0, 3);
					p14 = p11.substring(3, l12);
					p15 = enteredNumber.substring(d2 + 1, l15);
					formattedNumber = '(' + p13 + ')' + p14 + p15;
					textObj.value = formattedNumber;
				}
				l16 = enteredNumber.length;
				p16 = enteredNumber.substring(d2 + 1, l16);
				l17 = p16.length;
				if(l17 > 3 && p16.indexOf('-') == -1) {
					p17 = enteredNumber.substring(d2 + 1, d2 + 4);
					p18 = enteredNumber.substring(d2 + 4, l16);
					p19 = enteredNumber.substring(0, d2 + 1);
					formattedNumber = p19 + p17 + '-' + p18;
					textObj.value = formattedNumber;
				}
			}
		}
	</script>
</head>

<body>
	<form name="frmPhone">
		<input type="text" name="preferred" maxlength="13" onkeypress="ValidatePhone(this);" onclick="ValidatePhone(this);">
		<input type="text" name="alternate" maxlength="13" onkeypress="ValidatePhone(this);" onclick="ValidatePhone(this);">
	</form>
</body>
</html>

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Thank You Very Much Dan, that did it :)

I used frontpage to build a quick and dirty page for testing but normally I use php+html and I'm slowly integrating javascript for like you said, form validation.
 
Upvote 0 Downvote
I got to give you a star BillyRay (Dan), that took a lot of patience.

This post was valuable in a way such that it taught me patience!!

[monkey][snake] <.
 
Upvote 0 Downvote
What can I say. It was (still is!) a long evening. Burning the candle at both ends and all that with last-minute client demands, with TT in-between.

But for now? It's time for bed! [yawn]



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Same here Dan, have 5 stars :)

I just wanted to thank you again, and I read thru several javascript tutorials last night
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
1K
Mike Lewis
Mike Lewis
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
580
rogerte
rogerte
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
689
xwb
xwb
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
641
malpa
malpa
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
584
coldbohemia
coldbohemia

Part and Inventory Search

Sponsor

Back
Top