Pages

Get QueryString values using JavaScript

In asp.net, we retrieve query string values using QueryString collection property of HttpRequest class which in turn is exposed as a Request property of Page class. So in asp.net we can get query string value using syntax like Page.Request.QueryString[index | "key_name"] and so on. However, many times, we also need to access these query string values in client script, say, JavaScript.


How about accessing QueryString collection in a same way (using same syntax) from within a javascript code! The idea here is to create a name-value collection in javascript using array and then retrieving value of any given key from that array. Lets see how do we do it!
function getQueryStrings() {
    //Holds key:value pairs
    var queryStringColl = null;
            
    //Get querystring from url
    var requestUrl = window.location.search.toString();

    if (requestUrl != '') {
        //window.location.search returns the part of the URL 
        //that follows the ? symbol, including the ? symbol
        requestUrl = requestUrl.substring(1);

        queryStringColl = new Array();

        //Get key:value pairs from querystring
        var kvPairs = requestUrl.split('&');

        for (var i = 0; i < kvPairs.length; i++) {
            var kvPair = kvPairs[i].split('=');
            queryStringColl[kvPair[0]] = kvPair[1];
        }
    }

    return queryStringColl;
}
Consider an example url that reads http://yourserver/page.aspx?key1=value1&key2=value2&... here is how to use it from another function to get a value of key1 using the similar syntax that you would use in asp.net code.
function myfunction() {
    var queryStringColl = getQueryStrings();

    if (queryStringColl == null) {
        //alert('no querystring found');
        return;
    }

    //alert(queryStringColl['key1']);
}
Now assume that you want to access querystring collection of the same page multiple times from different functions, in that case it does not make sense to retrieve values each time as the url would stay the same for given url (unless it is posted back to server with new querystring values!). What could be done is, define queryStringColl as a global variable in your script block or file, add a condition on the same to check for null and if its null then only allow getQueryStrings function to proceed to retrieve values. So modified function would look like this:
//Holds key:value pairs (global variable)
var queryStringColl = null;

function getQueryStrings() {
    if (queryStringColl == null) {
           ....
    }

    return queryStringColl;
}

---End---

8 comments:

  1. Replies
    1. Good Very Simple And Easy.

      Delete
    2. Good one bro. However, I see that you have to call function each key in query string. What if there are 10 keys in a query string! :) Above snippet, you just have to call a function once and you get all the key-value pairs in an array.

      Delete
  2. how to make dynamic javacsript src file ???

    ReplyDelete
  3. i want one variable from query string append to the Javascript src file...

    ReplyDelete
    Replies
    1. Assign ID to your script tag and in your js function you can get script src as below:

      var scriptSrc = document.getElementById(script element id here).src

      However, this is wrong approach. Why don't you pass parameter to javascript function instead of passing it through querystring in js file!

      Delete
  4. Hi

    In http://namkeenvilla.com website is very slow my Javascript file is takes time to load .. help me ..

    Thanks
    Mayank

    ReplyDelete