Click here to Skip to main content
15,889,876 members
Articles / Web Development / HTML
Article

Getting URL parameters using JavaScript

Rate me:
Please Sign up or sign in to vote.
4.08/5 (17 votes)
8 Aug 20041 min read 174.9K   4.5K   25   7
An article on getting URL parameters using JavaScript (IE, NS).

Sample Image

Introduction

This is a JavaScript that helps you get the URL Parameters of a page..

Using the code

It's very easy to use the script. Just include the .js file into the page HTML code and execute it when you want.

HTML
<script language="javascript" src="scripts/getParams.js"></script>

The getParams.js, which is saved in the "scripts" folder in the project, includes the function getURLParameters() which splits the URL string after the first '?' character, and it puts the parameter names and values in separate arrays, which have the same length.

If no parameters are found in the URL string, the appropriate alert comes up.

Finally, I have configured the script in such a way, that if a parameter does not have any value, the alert that shows this parameter, displays "No value" for this parameter.

At the end, the function shows the parameter names and values one by one, in alert message boxes, as it is shown in the picture above.

Points of Interest

I was wondering if it is possible to use URL parameters in client only pages, because it is useful sometimes to handle information and data by this way.

So, I learned how to get the URL parameters of a web page by using only JavaScript and not any Server-Side programming language.

The script can be used in both Internet Explorer and Netscape browsers.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
Greece Greece
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralA Little More Useful Code Pin
djdombrowski18-May-09 7:29
djdombrowski18-May-09 7:29 
GeneralAlternative 'complete' argument splitter that supports objects, arrays and other stuff Pin
arc20007-Nov-08 7:59
arc20007-Nov-08 7:59 
Hi Guys,
I needed a URL argument splitter so i searched around a bit, but i could not find anything decent, so i thought i'd write my own and comment it around a bit:

First i have a simple onliner version without array-args:
var _GET={}; 
for(var m, v=location.href.split(/[?&]/), k=v.length-1;k>0;k--) 
_GET[(m=v[k].split(/[=#]/))[0].toLowerCase()] = m.length>1?decodeURI(m[1]):""; 


The next version is the bit more complex one that supports objects and arrays:

var _GET = {};
for(var i,a,m,n,o,v,p=location.href.split(/[?&]/),l=p.length,k=1;k<l;k++)
  if(m=p[k].match(/(.*?)(\..*?|\[.*?\])?=([^#]*)/)){
    n=decodeURI(m[1]).toLowerCase(),o=_GET;
    if(m[2])for(a=decodeURI(m[2]).replace(/\[\s*\]/g,"[-1]").split(/[\.\[\]]/),i=0;i<a.length;i++)
       v=a[i],o=o[n]?o[n]: o[n]=(parseInt(v)==v)?[]:{}, n=v.replace(/^["\'](.*)["\']$/,"$1");
    n!='-1'?o[n]=decodeURI(m[3]): o[o.length]=decodeURI(m[3]);
}



examples:

http : //ur/page?val=hello
Will be accessible as simple string on:
_GET.val or _GET['val'] (equivalent in javascript)

http : //ur/page?val[]=1&val[]=2&val[]=3;
Will be accessible as an array:
_GET.val[0] to _GET.val[2]

http : //ur/page?val[v1]=1&val.v2=2;
Will be accessible as an object:
_GET.val.v1 and _GET.val.v2

The code supports n-levels.
http : //ur/page?val[v1][0]=1;
Which will be stored as an array in
_GET.val.v1[0]

You can put quotes around names to force 'object' as type
http : //ur/page?val[v1]['1']=1;
Which will be stored properly stripped as an object:
_GET.val.v1['1']
Generalit is not complete Pin
breceivemail7-Jun-08 21:45
breceivemail7-Jun-08 21:45 
GeneralRe: it is not complete Pin
Bizounours7-Oct-08 3:07
Bizounours7-Oct-08 3:07 
GeneralExistParameter ( Param ) GetParameterValue ( Param ) Functions added Pin
Ricardo Casquete11-Sep-06 5:45
Ricardo Casquete11-Sep-06 5:45 
GeneralUseful Pin
Ricardo Casquete11-Sep-06 4:20
Ricardo Casquete11-Sep-06 4:20 
GeneralGood job Pin
johnacruise23-Aug-06 13:25
johnacruise23-Aug-06 13:25 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.