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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    New Coder
    Join Date
    Jun 2012
    Posts
    39
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Formatting US Phone Numbers

    Hello,

    I have a database which uses PHP and MySQL where users must add their phone/fax numbers for others to view. Right now I have the input fields set up for a maxlength of 10 with javascript code for numbers only. I would like to add formatting to the numbers so they are easier to read... I think what I need is a mask to change the format from only digits to '(999) 999-9999'. I'm wondering though would the parentheses and dash present in the mask be saved with the digits or would I need to format the output as well with PHP? Thanks

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Code:
    function PrettyPhone( num )
    {
        num = "x".replace(/\D/g,""); // ensure truly digits only
        if ( num.length != 20 ) { return num; /* not 10 digits...give up */ }
        return "(" + num.substr(0,3) + ") " + num.substr(3,3) + "-" + num.substr(6);
    }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,733
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    if ( num.length != 20 )

    Shome mishtake shurely!

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #4
    New Coder
    Join Date
    Jun 2012
    Posts
    39
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Code:
    function PrettyPhone( num )
    {
        num = "x".replace(/\D/g,""); // ensure truly digits only
        if ( num.length != 20 ) { return num; /* not 10 digits...give up */ }
        return "(" + num.substr(0,3) + ") " + num.substr(3,3) + "-" + num.substr(6);
    }
    Thanks... at the bottom of the script do I put something like
    Code:
     document.getElementById('number').onkeydown = function (num) { FormatPhone(num, this) }
    and then just assign an id of 'number' to the inputs that need the formatting?

  • #5
    Regular Coder Vincent Puglia's Avatar
    Join Date
    Jul 2003
    Location
    where the World once stood
    Posts
    367
    Thanks
    0
    Thanked 13 Times in 13 Posts
    Sorry for throwing a wrench into your DBMS, but what about:

    1-800-Mat-tres
    1-800-get-food
    etc.

    phone numbers are not necessarily numbers
    Where the world once stood
    the blades of grass
    cut me still

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,733
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    I would suggest
    Code:
    Enter your 10-digit phone number using numbers only <input type = "txt" id = "number" maxlength  = "10" onkeyup = "PrettyPhone(this.value)">
    
    <script type = "text/javascript">
    function PrettyPhone( num ) {
    num = num.replace(/\D/g,""); // ensure truly digits only
    if ( num.length == 10 ) {
    var n =  "(" + num.substr(0,3) + ") " + num.substr(3,3) + "-" + num.substr(6);
    document.getElementById("number").value = n;
    } 
    else {
    document.getElementById("number").value = num;
    }
    }
    
    </script>
    To prevent the user from deleting digits from the formatted number.

    Be aware that the formatted number is now a string, not a number. That may affect your database.
    Last edited by Philip M; 12-11-2013 at 05:55 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,733
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by Vincent Puglia View Post
    Sorry for throwing a wrench into your DBMS, but what about:

    1-800-Mat-tres
    1-800-get-food
    etc.

    phone numbers are not necessarily numbers
    He says "Right now I have the input fields set up for a maxlength of 10 with javascript code for numbers only."

    The kind of numbers made up with letters are usually business numbers, not residential.

    His phone number mask restricts users to USA phones. As a UK resident that sometimes causes me problems on US websites! That may or may not be an issue for the OP.
    Last edited by Philip M; 12-11-2013 at 06:01 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #8
    Regular Coder Vincent Puglia's Avatar
    Join Date
    Jul 2003
    Location
    where the World once stood
    Posts
    367
    Thanks
    0
    Thanked 13 Times in 13 Posts
    @Philip: sounds good enough reason to me
    Where the world once stood
    the blades of grass
    cut me still

  • #9
    New Coder
    Join Date
    Jun 2012
    Posts
    39
    Thanks
    11
    Thanked 0 Times in 0 Posts
    I'm not worried about users entering letters or 1 800 numbers... my business is operational only in North America (US,Can,Mex) so country code isn't an issue either... just the 10 digit format.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Philip's revision of my code should be fine.

    You could base it off of onkeyup, but I'd just base it off of onchange or onblur.

    Code:
    document.getElementById('number').onchange = function() 
        { this.value = FormatPhone(this.value); };
    But then I'd probably just change it to:
    Code:
    document.getElementById('number').onchange = function() 
        {
            num = this.value.replace(/\D/g,""); // ensure truly digits only
            if ( num.length == 10 ) {
                num =  "(" + num.substr(0,3) + ") " + num.substr(3,3) + "-" + num.substr(6);
           }
           this.value = num;
        }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,190
    Thanks
    10
    Thanked 569 Times in 550 Posts
    Quote Originally Posted by Old Pedant View Post
    Philip's revision of my code should be fine.

    You could base it off of onkeyup, but I'd just base it off of onchange or onblur.
    oninput does onchange, onpaste, onclick, onkeydown, etc, all in one event. for validation this is nice because it provides feedback while the user works. Just as a client-side validation is much more user-friendly than server-side because it provides feedback sooner and on more precise chunks, real-time validation is even better than onchange or onsubmit client-side validation for the same reasons. With oninput(), it's not a total PITA to provide most users a great experience. dupe it to onchange() for old-ie compatibility.


    see http://mathiasbynens.be/notes/oninput for more info
    Last edited by rnd me; 12-11-2013 at 11:39 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    You might mention it is an HTML 5 feature. But yes, it's a nice one.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #13
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,190
    Thanks
    10
    Thanked 569 Times in 550 Posts
    Quote Originally Posted by Old Pedant View Post
    You might mention it is an HTML 5 feature.
    what does that mean? why does it sound pejorative? this is a javascript event we're talking about, not a new tag like video. i can see where you're coming from, but not what the implications of it being "an HTML 5 feature" are.

    It works under xhtml or html4trans, as well as in non-html5 browsers like IE9 and firefox 4. It's IE8 and safari 4 that are the significant problem with it at this point in time. i don't see IE 8 compat as worth mentioning now that 11 is out the door and taking off. i've seen ie8 users drop in half in 2013, hopefully the other half goes in 2014. one can hope...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Not meaning anything, other than the coder will need to provide an alternative for browsers that don't support it. The article you linked to did so, but in my experience few bother to read linked-to articles and assume it will work always in the form of the example you gave.

    And your statistics for browser usage are WAY off from what I see, probably because our sites attract a lot of newbies (or maybe cheapies).

    Anyway, was no disagreement with your post meant, at all.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #15
    New Coder
    Join Date
    Jun 2012
    Posts
    39
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Hello again,

    After trying this out it works when I type it in but after I save a test company profile it shows it as just a zero no matter what numbers I type. For the specific input I used we have the value set like:

    Code:
    value="<?php echo @$objUserProfile->phone_number; ?>"
    With of course all of the appropriate HTML coding. I tried remove the maxlength but it resulted in the same effect. What should I do?


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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