Change href when user clicks link

Question

Ok So im trying to add an id to a link example:

<a href="http://google.com/stats.php?go=normal">normal</a>  
<a href="http://google.com/stats.php?go=normalmedium">normal medium</a> 
<a href="http://google.com/stats.php?go=normalmediumhigh">normal medium high</a> 
<a href="http://google.com/stats.php?go=normalhigh">normal high</a> 
<a href="http://google.com/stats.php?go=superhigh">super high</a>

by default the links are like this but if they click on let say a button or link like this:

<a href="#" onclick="changeIt('bnone9099');>burner one</a> 
<a href="#" onclick="changeIt('bnone9034');>burner two</a> 
<a href="#" onclick="changeIt('bnone9098');>burner three</a>

when they click on one of the links it should add an id like this example if they click "burner one" :

<a href="http://google.com/stats.php?go=normal&id=bnone9099">normal</a>  
<a href="http://google.com/stats.php?go=normalmedium&id=bnone9099">normal medium</a> 
<a href="http://google.com/stats.php?go=normalmediumhigh&id=bnone9099">normal medium high</a> 
<a href="http://google.com/stats.php?go=normalhigh&id=bnone9099">normal high</a> 
<a href="http://google.com/stats.php?go=superhigh&id=bnone9099">super high</a>

and so on and if they click

<a href="#" onclick="changeIt('back');>default</a>

it should change the links back to normal like this

<a href="http://google.com/stats.php?go=normal">normal</a>  
<a href="http://google.com/stats.php?go=normalmedium">normal medium</a> 
<a href="http://google.com/stats.php?go=normalmediumhigh">normal medium high</a> 
<a href="http://google.com/stats.php?go=normalhigh">normal high</a> 
<a href="http://google.com/stats.php?go=superhigh">super high</a>

i hope this example is not too complicated! thanks :)

Answer 1

Lets make use of jquery's .data() funciton

function changeIt(arg){
    // I highly recommend you add something to control the target 'a' tags
    // 'the_link_undercontrol' is merely my assumption
    $('a.the_link_undercontrol').each(function(){
        var $t = $(this);
        if(arg == 'back'){
            if($t.data('originalLnk')){
                $t.attr('href', $t.data('originalLnk'))
            }
        } else {
            var href = $t.attr('href');
            if(href.indexOf('?') != -1){
                // you need to check if 'id' is the only parameter!!
                // and for best practice, get your param properly encoded
                $t.attr('href', href + '?id=' + encodeURIComponent(arg);
            } else {
                $t.attr('href', href + '&id=' + encodeURIComponent(arg);
            }
            $t.data('orginalLnk', href);
        }
    }
}

Answer 2

function changer(){
   var changedArr = [];
   this.changeIt = function($this, str ){

     if(str!="back"){
         $this = document.getElementById($this);
         $this.href = $this.href+"&id="+str;
         changedArr.push( $this );
     }else{
         for( var i=0, len=changedArr.length;i<len;i++){
           var lastInd = changedArr[i].href.lastIndexOf("&");
           changedArr[i].href = changedArr[i].href.substr(0,lastInd);
         }
     }
  };

}

var chHandler = new changer();

and html...

<a id="link1" href="http://google.com/stats.php?go=normal">normal</a>  
<a id="link2" href="http://google.com/stats.php?go=normalmedium">normal medium</a> 
<a id="link3" href="http://google.com/stats.php?go=normalmediumhigh">normal medium high</a> 
<a id="link4" href="http://google.com/stats.php?go=normalhigh">normal high</a> 
<a id="link5" href="http://google.com/stats.php?go=superhigh">super high</a>

and...

<a href="#" onclick="chHandler.changeIt('link1','bnone9099');">burner one</a> 
<a href="#" onclick="chHandler.changeIt('link2','bnone9034');">burner two</a> 
<a href="#" onclick="chHandler.changeIt('link3','bnone9098');">burner three</a>

<a href="#" onclick="chHandler.changeIt('dummy','back');">BACK</a>

Explanation of the above code. We are creating a new object of "changer()", in the changeIt class, we are passing two arguments - the first is the id of the link who's id is to be edited, and the second one is the value's/id's data.

we are keeping the changed links into an array called changedArr, and when back is clicked (triggered because it sents 'back' as the second argument), we are doing a for-loop in the changedArr, and remove everything that follows the last occurance of &.... (which is always in this situation the id arg)

You can see a working example here, http://jsfiddle.net/H2YHw/

Answer 3

I have done something similar in the past. It was in PHP, but the idea is very much the same. I use it quite frequently especially when dealing with page numbers, when I add &p=3 to link to specific page. I just keep it in my utility box. Anyway, this is how I tackled it.

1. You need to check if your url has already id parameter.
2. If it does then change it, if it doesn't simply add one.

To filter parameters you can write a method that will take two strings one with parameter id and one with value. It has to do following.

1. split http://google.com/stats.php?go=superhigh&id=333231 via ? character to get the second part (parameters) of the url.
2. split second part of the url - array[1] by & - this will give you an array of all parameters with their values. Note: check if there it contains & if it doesn't then move to step 3.
3. For loop through every one of them and split it by = - array[0] is your parameter and array[1] is the value. If your parameter matches the parameter needed update it with new value and break. If it doesn't then add a new set of parameter/values to the end of the url.

I hope that makes sense.

Reference: http://www.quirksmode.org/js/strings.html#split