jQuery

jQuery change url parameter value

Posted on: September 7th, 2013 by taff 2 Comments

Using jQuery to change the parameter of a url when an element, such as a select or a is clicked, can be done in a number of ways. Below are two examples.

Change URL parameter value by using the javascript split method

The simplest is probably something along these lines, although as we ill see later, the easiest is not always the best.

function changeFirstParam(href, newVal) {
//get our parameters into an array
params = href.split('&');
//this will only work if the first parameter is the one
//we need to change
var src = params[0].split('=');
//Remove the first value of the first parameter
params.shift();
//Give the first parameter a new value
src[1] = newVal;
//Join it all back up
var newUrl = ( src.join('=') + params.join('&'));
//Return our new url
return newUrl;
}

var href = changeFirstParam("http://domain.com?var=thisIsOld&a=1&b=2&c=3","theNewValue");
console.log(href);

The above script splits the parameters into an array, then changes the first parameters value. This will probably suffice for most cases but what if we aren't sure which position our parameter will have? I want to keep my scripts as dynamic as possible to accomodate future changes in the backend, thus even though the overhead is slightly higher I prefer something with a regular expression.

Change URL parameter value with a Javascript Regular Expression (RegEx)

function changeParam(href, newVal) {
var tmpRegex = new RegExp("(var=)[a-z]+", 'ig');
return replace(tmpRegex, '$1'+newVal);
}

var href = changeParam("http://domain.com?var=thisIsOld&bca=something&b=2&c=3","theNewValue");
console.log(href);

This will simply replace the value of our var parameter no matter what position it has in the parameter list. Not bad, but what if I need an identical function when a radio button value is changed as well. The solution of course? A variable! This is why the above example uses a RegExp constructor. If we had tried to put a variable directly in the replace method it wouldn't work.

Change URL parameter value with a variable in a Javascript Regular Expression (RegEx)

function changeParamByName(href, paramName, newVal) {
var tmpRegex = new RegExp("(" + paramName + "=)[a-z]+", 'ig');
return href.replace(tmpRegex, '$1'+newVal);
}

var href = changeParamByName("http://domain.com?var=thisIsOld&bca=something&b=2&c=3","bca","theNewValue");
console.log(href);

The following is an example of some html where I used the following script. It is a simple ul list whereby the list element has a data-language attribute. When someone clicks on a list element, we want the favLanguage parameter value to change accordingly:

Change URL Parameter Value when Element clicked with jQuery

<ul id="language">
	<li data-language="php">PHP</li>
	<li data-language="asp">ASP</li>
	<li data-language="js">Javascript</li>
</ul>
<a id="languageLink" href="http://domain.com/index.php?favLanguage=default">Submit Language</a>
var paramName = "favLanguage";
jQuery("#language li").click( function(e) {
jQuery("#languageLink").attr('href', function(i,a){
var tmpRegex = new RegExp("(" + paramName + "=)[a-z]+", 'ig');
return a.replace(tmpRegex, '$1'+e.target.dataset.language);
});
});

We've done away with an external function now, which should increase the readability, although if we needed the functionality on a different element too, we would outsource it. When an item from the list is clicked the href attribute is changed.

2 Responses

  1. Aash

    September 22, 2014

    This was a life saver
    Thanks Dev

    Reply
  2. Jermaine

    July 29, 2015

    This is really interesting, You are an excessively professional blogger.
    I’ve joined your rss feed and look forward to in search of
    extra of your wonderful post. Additionally, I have shared your site in my social networks

    Reply

Leave a Reply