How to resolve duplicate parameters in URL

Question

I have an Ajax select input that changes the URL when changed, the page does not refresh. However when the select input is changed multiple times, repeated parameters stack in the URL:

[domain]/find.php?cat=1#pricemin=10&pricemax=500#pricemin=10&pricemax=500

How can I use javascript to encode it back to:

[domain]/find.php?cat=1#pricemin=10&pricemax=500

so that there are no duplicate parameters?

An example of my current jQuery is as below:

$('#filterform select').on('change', function(e){
        var dummy = $('#filterform').serialize(),
            loc = $('<a>', {href:window.location})[0];

        someajaxfunction();//do ajax function here
        if(history.pushState){
            history.pushState(null, null, loc +'#'+ dummy);
        }
    });

I have tried replacing loc with loc.pathname and the repeated parameters problem is solved. However my ?cat=1 form parameter is gone as well which is not desired. I wish to look at this problem with a URL search-and-modify jQuery/javascript method, for example:

What we have is

[domain]/find.php?cat=1&subcats%5B%5D=1&subcats%5B%5D=2

What we want is

[domain]/find.php?cat=1&subcats=1+2

Is it possible?

Note: 5 minutes after posting this question I realised that using loc.pathname + loc.search solves my problem, sorry for the long post. I am still curious about a URL search-and-modify jQuery/javascript method. Would appreciate if anyone can provide a starting point, thanks!

@Roamer-1888 # is needed for some other functionality, but you are right, in this example I wish to know how to modify the URL with javascript, thats all ;) — iWillGetBetter
– iWillGetBetter, Commented Dec 27, 2016 at 2:45
I guess it's valid, just a little odd to see query string stuff the wrong side of a #. — Roamer-1888
– Roamer-1888, Commented Dec 27, 2016 at 2:51
@Roamer-1888 You're right, as good practice I should change that. My main reason for doing so is to seperate form submission parameters and ajax parameters, you think I should put them together? If so, do I need to make sure it is separated by some special character or is '[domain]/find.php?cat=1&pricemin=10&pricemax=500' fine? — iWillGetBetter
– iWillGetBetter, Commented Dec 27, 2016 at 2:54
I see what you're doing now and can't say you're wrong to do so. But more conventionally, you would retain state-related data by passing a js plain object to history.pushState() as its first parameter. — Roamer-1888
– Roamer-1888, Commented Dec 27, 2016 at 3:36

Nghia Tran · Accepted Answer · 2016-12-27 03:21:47Z

2

function removeDuplicate(url) {
  url = decodeURIComponent(url);                  // decode the url, %5B becomes [ and ,%5D becomes ]. Hence the url becomes  [domain]/find.php?cat=1&subcats[]=1&subcats[]=2
  var query = url.split('?')[1];                  // get only the query
  var parts = query.split('&');                   // split the query into parts: cat=1, subcats[]=1, subcats[]=2
  var params = {};
  for (var i = 0; i < parts.length; i++) {
    var nv = parts[i].split('=');
    if (!nv[0]) continue;
    var value = nv[1] || true;
    if (params[nv[0]] && params[nv[0]].indexOf(value)) {
      params[nv[0]].push(value);
    } else {
      params[nv[0]] = [value];
    }
  }

  url = url.split('?')[0] + '?';
  var keys = Object.keys(params);
  for (var i = 0; i < keys.length; i++) {
    url += keys[i] + '=' + params[keys[i]].join('+');

    if (i !== keys.length - 1) url += '&';
  }
  return url;
}

edited Dec 27, 2016 at 3:21

answered Dec 27, 2016 at 2:46

Nghia Tran

8191 gold badge7 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

iWillGetBetter Over a year ago

thanks for your answer! I understand that you mean the php needs the [] for form submission, you do also mean that it is impossible to change the URL somehow after the the form submission?

Nghia Tran Over a year ago

Actually I am not sure what the [] is used for in this case. It looks like there is something missing in the url. What I mean in the answer is that, logically, subcats=1&subcats=2 is not equivalent to subcats=1+2 so there is no way to do what you ask for. FYI, I think removing duplicate parameters is dangerous. As you can see subcats=1&subcats=2 is redundant to subcats=2. While the first is always false, the later might be true in cases.

iWillGetBetter Over a year ago

[] is used by PHP as a proper way to serialize form variables (it's weird I know), for example, multiple checkboxes. I understand where you are coming from, but in this case, logically they are equivalent.

Nghia Tran Over a year ago

@iWillGetBetter, I have just realized that by subcats=1+2 you mean subcats = 1 or 2. I thought it was subcats=3. I modified it so that it works just like what you ask for

iWillGetBetter Over a year ago

thanks! just to push you a bit more, because you started with a fixed string, does your solution still work when you need to get the URL after a page load/ajax submission?

Collectives™ on Stack Overflow

How to resolve duplicate parameters in URL

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related