CODEWITHSUNDEEP
javascriptjqueryajax
None
None

Reputation: 9247

How to change href value on click

I have this link <a href="/Countries/388/10">next</a>. How can i achive that when i click on next a href to change value to <a href="/Countries/388/20">next</a> without refresh.When user click again to be 30...again 40.... Any ideas? Like counter, to add 10 after click

Upvotes: 0

Views: 3089

Answers (5)

Jamie Barker
Jamie Barker

Reputation: 8246

I think the easiest method would be to use RegEx:

$('a.next').click(function(event){
    event.preventDefault(); //Prevent the link from going anywhere
    var href=$(this).prop('href');
    var RegEx = /(.*)\/([\d]+)/g
    var Number=href.replace(RegEx,'$2');
    Number=parseInt(Number)+10
    href=href.replace(RegEx,'$1'+'/'+Number);
    $(this).prop('href', href);
});

EXAMPLE

UPDATE

Doing this each time the page reloads is better to do with Back-End language you are using (PHP, .NET, etc.), however this should be able to do the trick if it MUST be done with jQuery.

$('a.next').click(function(event){
    event.preventDefault(); //Prevent the link from going anywhere
    var href=$(this).prop('href');
    var RegEx = /(.*)\/([\d]+)/g
    var URL = href.replace(RegEx,'$1')
    if (window.location.href.indexOf(URL) > -1) { // If this is the current URL
        var Number=window.location.href.replace(RegEx,'$2');
        Number=parseInt(Number)+10
        $(this).prop('href', URL + '/' + Number);
    } else {
        var Number=href.replace(RegEx,'$2');
        Number=parseInt(Number)+10
        $(this).prop('href', URL + '/' + Number);
    }
});

Upvotes: 0

void
void

Reputation: 36703

$("a").click(function(e){
    e.preventDefault();
    $(this).attr('href', '/Countries/388/20');
});

You need to use preventDefault() to not to redirect.

And to make it like counter

$("a").click(function(e){

e.preventDefault();
var _url = $(this).attr("href");
var _url_start = '/Countries/388/';
var _url_end = parseInt(_url.substr(url.lastIndexOf("/"), url.length-1));
$(this).attr('href', _url_start+(_url_end+10)');
    });

Upvotes: 4

Cerlin
Cerlin

Reputation: 6722

how about this

Code:

$('a').click(function(e){
    var countarr = $(this).attr('href').split('/');
    var countval = countarr.pop();
    countval = parseInt(countval,10) + 10;
    var url =  countarr.join('/') + "/" + countval;
    alert(url);
    $(this).attr('href',url);
    e.preventDefault();
})

remove e.preventDefault(); if you want to redirect

Upvotes: 0

user1017882
user1017882

Reputation:

Markup:

   <a id="myLink" href="/Countries/388/10">next</a>

jQuery:

   $('#myLink').click(function() { $(this).attr('href', '/Countries/388/20' });

Here, I've given your a element an id for selecting purposes. The jQuery selects this element based on the id, and assigns the new value to the href attribute.

This seems like odd requirements, though I have to say.

Upvotes: 0

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this :

$('a').click(function(){
   $(this).prop('href','/Countries/388/20');
});

Upvotes: 0

Related Questions