Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Posts
    166
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Form to insert hyphens in phone #

    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

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    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>

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Posts
    166
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Great stuff...
    I'll give it a try and let you know.
    Thank you.

    Regards,

    Paulette

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    Beyond Lament
    Posts
    424
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've save this from somewhere:

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



    You'd have to clean up the code...
    Quíet Storm Designs ~ Art is not what you see, but what you make others see.
    · the Storms· || ·Ultraviolent Winter· || ·Was Einstein Wrong?· || ·It´s About Time!·

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Modified this in a hurry so, might [not] work:

    Code:
    <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, along with some other interesting solutions...

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Posts
    166
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •