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

 

Justin Chevallier

Justin Chevallier

Avid Drupal site builder & user for +10 years.

Comments

Submitted by Tracie Dick on

Hi

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>

Submitted by Justin on

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>

Submitted by Shitanshu on

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

Submitted by Justin on

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

Submitted by Justin on

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

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.