Become Wordpress Professional - Your Ultimate Wordpress Guide

Monday, 7 October 2013

How to Get Query String Values with JavaScript

getting query string value with JavaScript
Getting query string values via javaScript will be our topic of discussion for today. JavaScript has brought a great revolution to the world wide web as we all know. It has in fact it has shaped the web a better way and has made it more user friendly.

What is a Query String?

Some people might not already know what a query string is. A Query String is basically a pair of key and value that is appended to URL of a webpage. Have a look at the following example to get a more concept of what a query string is:

Example of a Simple URL and URL with a Query String

Lets say we have a following URL to my site, this is simply the URL of my site:

http://www.wpreads.com

Now below is the URL to my site that contains query string "name" with a value "farsab". Or we can say it as key, value pairs where the key is "name" and the value is "farsab".

http://www.wpreads.com/?name=farsab

Sometimes we are required to get the values of the query strings contained within the URL string of a webpage. One might want to perform further actions according to the value contained within the query string. A simple example would be that I display an alert if the query string is set or trigger an event or do a anything from a great number of options that we have available.

For this purpose, we can use pure JavaScript function that can help us get the require values from the query strings. Below is the JavaScript snippet that can be placed within the head or footer section of a webpage to retrieve the values of the query strings.

 <script type="text/javascript">
             var key = "name";
             var value;
             value = getParameterByName(key);
             console.log(result);
            function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}       
   </script>

Considering the above example, here is how the workflow goes:

1) A variable "key" has been declared with a value "name"

2) A variable "value" has been declared which will store the query string value

3) We are calling a function named "getParameterByName" that is defined at the bottom of the script and storing the returned value in the variable named "value"

4) Then I am simply logging the value in the console for now ( here is the place where we can perform other things such as triggering an event or doing anything else )

Multiple Query Strings

Now what if we have multiple query strings?, well for multiple query strings, this function might not be efficient enough but still we can simply set the variable for each query string and call the function twice or multiple times as per requirement.

This is the how we can get the values of the query strings and perform further actions based on the returned value.

0 comments:

Post a Comment

Please Avoid Spamming. Comments will be moderated before they are published.