Format phone number from URL parameter

[jmeats77]

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=dura ngo&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.

[Old Pedant]

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]

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

[jmeats77]

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.