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
I don't see any reason why changing "preferred" to "alternate" would give the same number in both boxes... can you post your modified script? I'm guessing you missed something...

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Here is my actual script, I cut off everything after the 2 phone number boxes

<html>


<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>

<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.alternate.value="";
document.frmPhone.alternate.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.alternate.value="";
document.frmPhone.alternate.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.alternate.value="";
pp="("+p13+")"+p14+p15;
document.frmPhone.alternate.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.alternate.value="";
document.frmPhone.alternate.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>

<title>Helpdesk</title>

<?
include('/site/website/class/class.php');
?>

<table border="0">
<tr><td>

<?
include('menu.php');
?>

</div>

</td><td>


</td></tr>
</table>

<br>

<table border="1" bordercolor="white" bgcolor="#d6dff7">

<tr><td>
<form method="POST" action="add_new_insert.php" name=frmPhone>
<b>Status:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;
Date:</b><br>
<input type="text" name="status" size="20" value="open">&nbsp;
<input type="text" name="date" size="20" value="<? echo date("m/d/y : H:i:s")?>"?></p>
<p><b>Client:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&
nbsp;&nbsp;&nbsp;&nbsp;
Company:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Primary #:&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Alternate #:</b><br>
<input type="text" name="client" size="20">&nbsp;
<input type="text" name="company" size="20">&nbsp;
<input type=text name=preferred maxlength="13" onclick="javascript:getIt(this)" >&nbsp;
<input type=text name=alternate maxlength="13" onclick="javascript:getIt(this)" >
 
Upvote 0 Downvote
yea it's a horrible mess :)

It's just a test page I built on the fly, the actual page is formatted better, all written in php
 
Upvote 0 Downvote
I added "b" to the 2nd script of script behind everything that said:

ValidatePhone
getIt
testphone

Now the 1st box works "preferred" but "alternate" does not, the numbers go in but no formatting takes place
 
Upvote 0 Downvote
You owe me money then :)

<input type=text name=preferred maxlength="13" onclick="javascript:getIt(this)" >&nbsp;
<input type=text name=alternate maxlength="13" onclick="javascript:getItb(this)" >
 
Upvote 0 Downvote
Did you also updatye the 'onclick'? I'd put money that you missed one somewhere.
Click to expand...

I'm going the opposite way and saying you changed one too many.


[monkey][snake] <.
 
Upvote 0 Downvote
I tried with and then without changing the onclick, same results both ways
 
Upvote 0 Downvote
Post your code exactly as you have it, like you did above. I (or someone else faster) will find what's wrong.

[monkey][snake] <.
 
Upvote 0 Downvote
<html>
<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>
<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 ValidatePhoneb(){
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.alternate.value="";
document.frmPhone.alternate.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.alternate.value="";
document.frmPhone.alternate.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.alternate.value="";
pp="("+p13+")"+p14+p15;
document.frmPhone.alternate.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.alternate.value="";
document.frmPhone.alternate.value=pp;
//obj1.value="";
//obj1.value=pp;
}
}
//}
setTimeout(ValidatePhoneb,100)
}
function getItb(m){
n=m.name;
//p1=document.forms[0].elements[n]
p1=m
ValidatePhoneb()
}
function testphoneb(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>

<title>Helpdesk</title>

<?
include('/site/website/class/class.php');
?>

<table border="0">
<tr><td>

<?
include('menu.php');
?>

</div>

</td><td>


</td></tr>
</table>

<br>

<table border="1" bordercolor="white" bgcolor="#d6dff7">

<tr><td>
<form method="POST" action="add_new_insert.php" name=frmPhone>
<b>Status:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;
Date:</b><br>
<input type="text" name="status" size="20" value="open">&nbsp;
<input type="text" name="date" size="20" value="<? echo date("m/d/y : H:i:s")?>"?></p>
<p><b>Client:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&
nbsp;&nbsp;&nbsp;&nbsp;
Company:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Primary #:&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Alternate #:</b><br>
<input type="text" name="client" size="20">&nbsp;
<input type="text" name="company" size="20">&nbsp;
<input type=text name=preferred maxlength="13" onclick="javascript:getIt(this)" >&nbsp;
<input type=text name=alternate maxlength="13" onclick="javascript:getItb(this)" ></p>
<p><b>Priority:<br>
 
Upvote 0 Downvote
If I copy that exact code, add the missing open and close "body" tag, and the missing closing "form" and "html" tags, then it all works just fine (in that the values in alternate & preferred can be distinct and different).

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
If you go back up, earlier I posted that distinct and different numbers can go in both boxes, but only the 1st box is formatted the #, the 2nd box does no formatting.
 
Upvote 0 Downvote
Odd - I started tidying up the formatting to look into the code, and it started breaking again. Will keep at it.

One thing that is really stumping me at the moment is how your events are being called onkeypress when you have an onclick attribute. I can't fathom it out.

I'll keep at it, though... and will re-work the code so that you don't need 2 copies of it.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
So you mean those global variables need to be different on the 2nd copy?

Examples: p, p1, n : pb, p1b, nb
 
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