Home/ Questions/Q 6812701
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T20:28:52+00:00

I have an html page with JavaScript code for setting the phone number format

  • 0

I have an html page with JavaScript code for setting the phone number format “(xxx)xxx-xxxx”, automatically while the user is typing.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
/*Start of phone number formating */
var n;
var p;
var p1;
function format_phone(){
p=p1.value
if(p.length==3){
    pp=p;
    d4=p.indexOf('(')
    d5=p.indexOf(')')
    if(d4==-1){
        pp="("+pp;
    }
    if(d5==-1){
        pp=pp+")";
    }
    document.form4.phone_number.value="";
    document.form4.phone_number.value=pp;
}
if(p.length>3){
    d1=p.indexOf('(')
    d2=p.indexOf(')')
    if (d2==-1){
        l30=p.length;
        p30=p.substring(0,4);
        p30=p30+")"
        p31=p.substring(4,l30);
        pp=p30+p31;
        document.form4.phone_number.value="";
        document.form4.phone_number.value=pp;
    }
    }
if(p.length>5){
    p11=p.substring(d1+1,d2);
    if(p11.length>3){
    p12=p11;
    l12=p12.length;
    l15=p.length
    p13=p11.substring(0,3);
    p14=p11.substring(3,l12);
    p15=p.substring(d2+1,l15);
    document.form4.phone_number.value="";
    pp="("+p13+")"+p14+p15;
    document.form4.phone_number.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);
    pp=p19+p17+"-"+p18;
    document.form4.phone_number.value="";
    document.form4.phone_number.value=pp;
    }
}

setTimeout(format_phone,100)
}
function getIt(m){
    n=m.name;
    p1=m
    format_phone()
}
/* End of phone number formating */

</script>

</head>

<body>
<form id="form4" name="form4" method="post" action="" onSubmit="return validation();">
<input name="phone_number" type="text" id="phone_number" style="float:left; margin-left:20px;"  align="top" value="Phone Number" 
    onFocus="if(this.value==this.defaultValue)this.value='';" maxlength="13" onclick="javascript:getIt(this)"/>
    </form>
</body>
</html>

I need to modify the script, so that it will automatically arrange the numbers like
“(xxx) xxx-xxxx”

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
/*Start of phone number formating */
var n;
var p;
var p1;
function format_phone(){
p=p1.value
if(p.length==3){
    pp=p;
    d4=p.indexOf('(')
    d5=p.indexOf(')')
    if(d4==-1){
        pp="("+pp;
    }
    if(d5==-1){
        pp=pp+") ";
    }
    document.form4.phone_number.value="";
    document.form4.phone_number.value=pp;
}
if(p.length>3){
    d1=p.indexOf('(')
    d2=p.indexOf(')')
    if (d2==-1){
        l30=p.length;
        p30=p.substring(0,4);
        p30=p30+") "
        p31=p.substring(5,l30);
        pp=p30+p31;
        document.form4.phone_number.value="";
        document.form4.phone_number.value=pp;
    }
    }
if(p.length>7){
    p11=p.substring(d1+1,d2);
    if(p11.length>4){
    p12=p11;
    l12=p12.length;
    l15=p.length
    p13=p11.substring(0,4);
    p14=p11.substring(4,l12);
    p15=p.substring(d2+1,l15);
    document.form4.phone_number.value="";
    pp="("+p13+") "+p14+p15;
    document.form4.phone_number.value=pp;
    }
    l16=p.length;
    p16=p.substring(d2+2,l16);
    l17=p16.length;
    if(l17>3&&p16.indexOf('-')==-1){
        p17=p.substring(d2+1,d2+5);
        p18=p.substring(d2+5,l16);
        p19=p.substring(0,d2+1);
    pp=p19+p17+"-"+p18;
    document.form4.phone_number.value="";
    document.form4.phone_number.value=pp;
    }
}

setTimeout(format_phone,100)
}
function getIt(m){
    n=m.name;
    p1=m
    format_phone()
}
/* End of phone number formating */

</script>

</head>

<body>
<form id="form4" name="form4" method="post" action="" onSubmit="return validation();">
<input name="phone_number" type="text" id="phone_number" style="float:left; margin-left:20px;"  align="top" value="Phone Number" 
    onFocus="if(this.value==this.defaultValue)this.value='';" maxlength="14" onclick="javascript:getIt(this)"/>
    </form>
</body>
</html>
    • 0