Format phone number from URL parameter

I have a URL parameter that reads:

file:///H:/2-University%20of%20Phoenix/4-Class/WEB-238%20Javascript%201/Extras/vrf_ack.html?name1=Jane&name2=Doe&number=1231231234&email=janedoe@gmail.com&cPart1=dodge&cPart2=durango&license=WSP1234&year=1233&state=WA&submit=Submit+Form

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(number);
document.write("<br>Email: ");
document.write(email);
document.write("<br>Vehicle: ");
document.write(cPart1 + ' ' + cPart2);
document.write("<br>License Plate: ");
document.write(license);
document.write("<br>Year: ");
document.write(year);
document.write("<br>State: ");
document.write(state);
</script>


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.

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

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

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.