Get values from URL query string with jQuery

It's possible to retrieve values that are specified in a URL query string using Javascript and jQuery. This can be useful for doing things like inserting dynamic content into a page, or pre-populating form fields.

For example if you had a URL with the following parameters and values:

http://www.example.com/?username=Joe%20Bloggs&company=Super%20Internet%20Company

The below will return a Javascript Object comprising the parameters specified in the URL.

// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

Calling getUrlVars() function would return you the following array:

{
    "username" : "Joe%20Bloggs",
    "company" : "Super%20Internet%20Company"
}

Get the values of the individual parameters using:

var userName = getUrlVars()["username"];
var companyName = getUrlVars()["company"];

You can then insert these values into your page using jQuery.
Note the use of 'decodeURI' - this will remove the %20 from the URL value and replace it with a space.

// insert value into content where there is an element with CSS class="userNameSwap"
// eg. <span class="userNameSwap"></span>
$('.userNameSwap').replaceWith(decodeURI(userName));

// insert value into a form field with CSS class="companyNameSwap" 
$("form input.companyNameSwap").val(decodeURI(companyName));

Tags:

Javascript

jQuery

Code snippets

Query string

Justin Chevallier

Avid Drupal site builder & user for +10 years.

Comments

GetUrlVars not working

Im new at this and cant get this to work. Can you help by looking at my code? Im using the values in the string correctly
http://www.mysite/testing.html?asset=545454&title=testing%20page

Thanks

<!DOCTYPE html>
<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled 1</title>
<script type="text/javascript" src="http://site.co.uk/sites/Abbey/Learning at abbey/central_system/central_scripts/jquery/jquery-1.6.1.min.js"></script>
<script type="text/javascript">

// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;

}
var assetNo = getUrlVars()["asset"];
var title = getUrlVars()["title"];

// insert value into content where there is an element with CSS class="userNameSwap"
// eg. <span class="userNameSwap"></span>
$('.assetNoSwap').replaceWith(decodeURI(assetNo));
$('.titleSwap').replaceWith(decodeURI(title));

</script>
</head>

<body>
<div>
<span class="assetNoSwap">asset no</span>, <span class="titleSwap">title</span>
</div>

</body>

</html>

Working code

It seems that the problem with your code is that you should include your JS code within the 'Doc ready' function. I also replaced the path to the jQuery library with a Google CDN hosted version as your path included spaces which isn't a good idea.

Here is the full working code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled 1</title>
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
</head>

<body>
<script type="text/javascript">
$(document).ready(function(){
    
    // Read a page's GET URL variables and return them as an associative array.
    function getUrlVars()
    {
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
    hash = hashes[i].split('=');
    vars.push(hash[0]);
    vars[hash[0]] = hash[1];
    }
    return vars;
    
    }
    var assetNo = getUrlVars()["asset"];
    var title = getUrlVars()["title"];
    
    // insert value into content where there is an element with CSS class="userNameSwap"
    // eg. <span class="userNameSwap"></span>
    $('.assetNoSwap').replaceWith(decodeURI(assetNo));
    $('.titleSwap').replaceWith(decodeURI(title));

});

</script>
<div>
<span class="assetNoSwap">asset no</span>, <span class="titleSwap">title</span>
</div>

</body>

</html>

I am having on issue

what will happen when username or company name will already having "&" it is breaking the code for me.

'&' in the URL query string

If I understand you correctly you mean that you have a query string something like this?

http://www.example.com/?username=Joe&company=Pick&Pay

If that is the case then the & in the company name, ie. Pick&Pay, needs to be replaced with it's html code equivalent which is: %26

In otherwords your query string should really look like this:

http://www.example.com/?username=Joe&company=Pick%26Pay

How to remove percentage sign from Query string value

Thanks for your tutorial about query string . How to remove the "%" that come in place of space.

Use 'decodeURI'

See the end of the post where I mention 'decodeURI'. This will convert the % values to their correct decoded value.

Drupal Den