Adding variable at the end of URL using jQuery

Question

So far I have done

jQuery:

function addURL(element)
{
var baseZipCode = 48180;
$(element).attr('href', function() {
    return this.href + baseZipCode;
});
}

html:

<a onclick="addURL(this)" href="http://www.weather.com/weather/today/" target="_blank">Click this</a>

My problem is when user clicks on link and the new window open everything is ok, but when the user clicks on the link again without a refresh, the variable is added twice to the link.

For example:

First time: http://www.weather.com/weather/today/48180

Second time: http://www.weather.com/weather/today/4818048180

It doesn't act right until you do a page refresh, any help would be appreciated. Thanks in advance

Gabriele Petrioli · Accepted Answer · 2013-04-09 16:24:25Z

1

Replace your addURL function with

function addURL(element)
{
    var baseZipCode = '48180';
    if (element.href.slice(-baseZipCode.length) !== baseZipCode){
        element.href += baseZipCode;
    }
}

there is no jQuery involved..

answered Apr 9, 2013 at 16:24

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

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

2 Comments

iambriansreed Over a year ago

+1 Nicely done, jQuery not needed. Is it better to check for existence first then add or just add then replace duplicates (lazy)?

Gabriele Petrioli Over a year ago

@iambriansreed, more of a preference.. the only benefit to checking is that you can specify where to check, whereas just replacing the duplicate could (very unlikely in this scenario) replace another match in the original string..

fernandosavio · Accepted Answer · 2013-04-09 16:26:30Z

1

You can try it with jQuery.fn.one

Javascript:

  jQuery("a").one("click", function(){ // Set a handler that execute once
        var baseZipCode = 48180;
        this.href += baseZipCode; //same as "this.href = this.href + baseZipCode"
    });

HTML:

<a href="http://www.weather.com/weather/today/" target="_blank">Click this</a>

Maybe you will need to add some class to <a> tags to differ it from another ones

answered Apr 9, 2013 at 16:26

fernandosavio

10.5k4 gold badges26 silver badges34 bronze badges

2 Comments

iambriansreed Over a year ago

+1 Not sure if the answer applies but jQuery.fn.one is a new one to me.

fernandosavio Over a year ago

Sometimes jQuery.fn.one is very useful.. Instead of test each user click you will just execute handler on first click.. I think it is a good solution in this case..

iambriansreed · Accepted Answer · 2013-04-09 16:19:08Z

0

This should be:

function addURL(element)
{
    var baseZipCode = 48180;
    element.href = (element.href + baseZipCode)
        .replace(baseZipCode + baseZipCode, baseZipCode);
}

answered Apr 9, 2013 at 16:19

iambriansreed

22.3k6 gold badges66 silver badges81 bronze badges

Comments

mlwacosmos · Accepted Answer · 2013-04-09 16:19:47Z

0

return this.href.indexOf(baseZipCode) != -1 ? this.href : this.href + baseZipCode;

answered Apr 9, 2013 at 16:19

mlwacosmos

4,56116 gold badges74 silver badges126 bronze badges

5 Comments

Rodrigo Siqueira Over a year ago

Guess this is not the case but if baseZipCode is already contained in the link it would fail. You will be better using slice(-baseZipCode.length) to check if it is contained at the end of the stirng

mlwacosmos Over a year ago

sure but u would be really unlucky to find your zip code elsewhere than where you put it

user2069471 Over a year ago

This worked perfectly because I am passing the zipcode as a request attribute. Thanks

user2069471 Over a year ago

@mlwacosmos Hey, once I changed my variable to a string, the zipcode started repeating again, for example I changed var zipcode = 48180 to var zipcode = '48180'. If you can, can you explain why your suggestion doesn't work anymore

user2069471 Over a year ago

@mlwacosmos I fixed it, I just put the value of the variable in this.href.indexOf() instead of the variable name

Collectives™ on Stack Overflow

Adding variable at the end of URL using jQuery

4 Answers 4

2 Comments

2 Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related