Aspire Media

a web development and technology blog

Get and Set URI Parameters on the Front-End


Ever wanted to pull a querystring parameter from the address bar? Or get one from an anchor tag? How about changing one that already exists or creating a brand new parameter? How about doing it on the front-end on the fly? If you’ve never felt the need to do anything of the kind, it’s safe to say that it’s only a matter of time before you do.

Here’s a simple little jQuery utility extension, called jQuery URI Params Extension, which I wrote to help. This extension will help you do all the aforementioned with great ease. The extension is quite tiny coming in at 1.4 kb. It will help with the following:

  • Get parameters from document URI or on-page anchor
  • Change an existing parameter
  • Add a new parameter

Using jQuery URI Params Extension

More information can be found in the Github repo here, but here are a few examples:

var param1 = $().getUriParam("param1"); // get querystring param1 from document URL
var param2 = $("#linkID").getUriParam("param2"); // get querystring param2 from anchor
var param3 = $("#linkID").changeUriParam("param3","77"); // change querystring param3 of anchor to "77"
var param4 = $("#linkID").addUriParam(url,"param4","88"); // add param4 querystring with value of "88" to anchor