View Full Version : Format phone number from URL parameter

11-30-2012, 03:13 AM
I have a URL parameter that reads:


This is created by a separate HTML form on a different page, so the values can change per user input.

I have the following code, in the body section, that reads and displays the parameter names and values on the second page:

<script language="javascript">
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
return vars;

var name1 = getUrlVars()["name1"];
var name2 = getUrlVars()["name2"];
var number = getUrlVars()["number"];
var email = getUrlVars()["email"];
var cPart1 = getUrlVars()["cPart1"];
var cPart2 = getUrlVars()["cPart2"];
var license = getUrlVars()["license"];
var year = getUrlVars()["year"];
var state = getUrlVars()["state"];

document.write("Name: ");
document.write(name1 + ' ' + name2);
document.write("<br>Phone Number: ");
document.write("<br>Email: ");
document.write("<br>Vehicle: ");
document.write(cPart1 + ' ' + cPart2);
document.write("<br>License Plate: ");
document.write("<br>Year: ");
document.write("<br>State: ");

I have tried 4 or 5 different ways to format the phone number value. It can be easy with just dashes (###-###-####), I just don't like the display of it all smashed together (1231231234). Any help would be great.

I have also tried formatting the form field on the first page and had it work there but when the values are read and displayed, wonky symbols are shown.

I don't really know where to go from here. I'm new to creating my own javascripts and not really sure where to go from here.

Old Pedant
11-30-2012, 03:30 AM
Well, first of all, why are you using document.write( )?? It is considered badly obsolete, you know.

BUt the formatting is trivial:

var number = getUrlVars()["number"];
// first, make sure it really is all digits:
number = number.replace(/\D/g,"");
// then make sure it 10 digits long:
number = "0000000000" + number;
number = number.substring( 0, 10 );
// and then format it:
number = "(" + number.substring(0,3) + ") " + number.substring(3,7) + "-" + number.substring(7);

Old Pedant
11-30-2012, 03:41 AM
Your code is braindead because it converts the query stirng to an array ONCE FOR EACH NAME! NO NO NO!

You should have done:

var vars = getUrlVars(); // ONE TIME!
var number = vars["number"];
var firstName = vars["firstname"];
... etc. ...

But that's still not good, because Your way of getting values from the querystring has a fatal flaw: If any of the values have encoded characters, your code will LEAVE them encoded. As you yourself noted: "...when the values are read and displayed, wonky symbols are shown.."

Here's a way to do it that makes sure the values are properly decoded:

var vars = [ ];
var pairs = location.search.substring(1).split("&");
for ( var p = 0; p < pairs.length; ++p )
var pair = pairs[p].split("=");
vars[ pair[0].toLowerCase() ] = decodeURIComponent( pair[1] );

And now you can do

var license = vars["license"];

and it will be right even if the license is something like A/37 G:5 (the / and space and : would be encoded in the querystring).

11-30-2012, 09:07 PM
Thanks for the quick reply and the help. I knew it was something simple but I couldn't figure out the structure of it. Thanks again for your help.