Javascript url modification

Question

I have a couple of menu's that add a variable to the current link uppon click. Here is an example:

<select onChange="window.location.href+=this.value">
  <option value="&numb=1">1</option>
  <option value="&numb=2">2</option>
  <option value="&numb=3">3</option>
</select>

<select onChange="window.location.href+=this.value">
  <option value="&cord=x">x</option>
  <option value="&cord=y">y</option>
  <option value="&cord=z">z</option>
</select>

My problem is then, if I choose "y" 2 times, it adds "&cord=y" 2 times. Instead I want it to replace the current value from that menu. So if "&cord=x" is allready present, it would then just change it to "&cord=y" instead of adding a new variable to the link. Ofcourse, if I choose one from the &numb menu, it shouldn't replace one from the &cord menu.

Can this be done? If yes, then how?

EDIT: Here is another example. If I have the url "www.google.com?cat=p&comp=x&type=1" and I choose "&comp=3" in my select box, It will then replace the current &comp with the new. If &comp is not set, it will just add &comp=3 (or whatever I chose) to the url.

Answer 1

These functions should let you parse and edit the URL parameters:

function splitObj(str, rowSplit, columnSplit) {
    var obj = {};
    var rows = str.split(rowSplit);
    for (var i = 0; i < rows.length; i++) {
        var kv = rows[i].split(columnSplit);
        if (kv.length === 1) {
            obj[kv[0]] = null;            
        } else {
            obj[kv[0]] = kv[1];
        }
    }
    return obj;
}

function joinObj(obj, rowSplit, columnSplit) {
    var rows = [];
    for (var name in obj) {
        if (name[obj] === null) {
            rows.push(name);            
        } else {
            rows.push(name + columnSplit + obj[name]);
        }
    }
    return rows.join(rowSplit);
}

function setUrlParam(name, value) {
    var parts = window.location.href.split('?');
    var urlbase = parts[0];
    var params = {};
    if (parts.length > 1) {
        params = splitObj(parts[1], '&', '=');
    }
    params[encodeURIComponent(name)] = encodeURIComponent(value);
    window.location.href = urlbase + '?' + joinObj(params, '&', '=');
}

function changeURL(elem) {
    var kv = elem.value.slice(1).split('=');
    setUrlParam(kv[0], kv[1]);
}

Then you can do:

<select id="select" onChange="changeURL(this);">
    <option value="&cord=x">x</option>
    <option value="&cord=y">y</option>
    <option value="&cord=z">z</option>
</select>

UPDATE:

You can make it cut out the splitObj and joinObj at the cost of readability.

function setUrlParam(name, value) {
    var parts = window.location.href.split('?'), params = {};
    if (parts.length > 1)
        parts[1].split('&').forEach(function(x){ 
            var p = x.split('='); 
            params[p[0]] = (p.length > 1) ? p[1] : null; 
        });
    params[encodeURIComponent(name)] = encodeURIComponent(value);
    window.location.href = parts[0] + '?' + Object.keys(params).map(function(x){ 
        return (params[x] === null) ? x : (x + '=' + params[x]); 
    }).join('&');
}

function changeURL(elem) {
    var kv = elem.value.slice(1).split('=');
    setUrlParam(kv[0], kv[1]);
}