Replace url parameter dynamically

Question

I have a script that adds a value from a clicked element. However - I would like to replace the value with a new one when clicked.

Example:

<ul class="acfilter"> <li><a href="reset">reset</a></li> <li><a href="One">One</a></li> <li><a href="Two">Two</a></li> </ul> 

Script

 $(document).ready(function() { $('ul.acfilter li a').on('click', function(e) { e.preventDefault(); if ($(this).attr('href') != "reset") { if (location.href.indexOf('?') === -1) { location.href = location.href + "?fss=" + $(this).attr('href'); } else { location.href = location.href + "+" + $(this).attr('href'); } } else { location.href = location.origin + location.pathname; } }); }); 

The first onclick parameter gives ?fss=one , and on the second click you get? fss=one+two . The reset link clears it.

However - I would like to replace the value of "one" with the value of "two" on the click. The value is dynamic - so I can't just make If / Else url.replace with a known value.

How can I do it?

Edit:

I forgot to mention that there may be other parameters in the URL. Example:

First click gives

 ?fss=one 

and when performing an action that gives another parameter that I mention, it gives the following:

 ?param=list&fss=one 

which is correct using a script from brijesh user chowdary lavu. Parameter = list is a parameter that should always be first and written for this and changes from list to large list, this also works with this script.

The problem is that I click on my specific class a second time - instead of going from

 ?param=list&fss=one 

to

 ?param=list&fss=two 

he replaces everything with

 ?fss=one 

Answer 1

Try it.

  $('ul.acfilter li a').on('click', function(e) { e.preventDefault(); if ($(this).attr('href') != "reset") { if (location.href.indexOf('?') === -1) { location.href = location.href + "?fss=" + $(this).attr('href'); } else { location.href = location.origin + location.pathname + "?fss=" + $(this).attr('href'); } } else { location.href = location.origin + location.pathname; } }); 

Or, using simple string methods, you can add a function to your script, as shown below, so that other parameters do not change:

 $(document).ready(function() { $('ul.acfilter li a').on('click', function(e) { e.preventDefault(); if ($(this).attr('href') != "reset") { if (location.href.indexOf('?') === -1) { location.href = location.href + "?fss=" + $(this).attr('href'); } else { location.href = changeParameter(window.location.toString(),"fss",$(this).attr('href')); } } else { location.href = location.origin + location.pathname; } }); }); function changeParameter(str,par,val) { var t1 = str.indexOf(par); var t3 = t1+par.length+1; var t2= str.indexOf("&",t3); if(t2==-1) { return str.substring(0,t3)+val; } else { return str.substring(0,t3)+val+str.substring(t2); } } 

Answer 2

You need to track your fss parameter (not the value) and replace its value all the time.

The best way to do this is split from fss point.

 //Lets split the href by the param fss var urlParts = location.href.split("fss"); //Insert your new value together with the param. (split removes the param) if (location.href.indexOf("?") < 0) location.href = urlParts[0] + "?fss=" + $(this).attr('href'); else location.href = urlParts[0] + "fss=" + $(this).attr('href'); 

And to reset

 location.href = location.href.split("fss")[0];