How to change hyperlink when button is clicked without reloading page

Question

I am trying to figure out how to change a hyperlink on-the-fly without reloading the page. I guess the best example would be how this website does it on this page:

http://www.namearoo.com/?q=tree+trimming

All of the links change depending on the options you select. I would like to do something like that on my site, but I don't know how it's done. I suppose something with jQuery:

$('.mylink').click(function(){

    //Some code..?

});

@Igy I think the OP wants to change page content (a listing of links). That question deals with changing the URL in the address bar, not changing page content. — showdev, Aug 20 '14 at 17:42
@showdev No, I'm trying to change the page content, not the URL in the address bar. On the example URL I posted, when you click a button to change a domain extension or registrar, the entire link changes- the URL, the title and the text. It has nothing to do with the address bar. — php die, Aug 20 '14 at 17:47
How will you be generating sets of links? Do you have some server-side code that outputs a list of links? If so, you might consider using [AJAX](http://api.jquery.com/jquery.ajax/) to load a new set of links without reloading the page. — showdev, Aug 20 '14 at 17:51

InTry · Accepted Answer · 2014-08-20T18:39:53.163

Change the href attribute of the desired anchor element

$("a").prop("href", "http://www.google.com/")

I have create jsfiddle for you, please take a look.

HTML:

<div id="links"> 
 <a data-curent-ext="com" href="http://www.google.com">google.com</a>
 <a data-curent-ext="com" href="http://www.yahoo.com">yahoo.com</a>
 <a data-curent-ext="com" href="http://www.bingo.com">bingo.com</a>
</div>
<br/>
<div class="triggers"> 
 <a class="change" data-url-ext="rs" href="#">rs</a>
 <a class="change" data-url-ext="bla" href="#">bla</a>
</div>

Jquery:

$('.triggers').on('click', '.change', function () {

    var urlExt = $(this).data('url-ext');

    $('#links').find('a').each(function () { 

        var self = $(this);
        var cExt = self.attr("data-curent-ext");

        self.attr({'href': function() {            
            return this.href.replace(cExt, urlExt); 
        }, "data-curent-ext": urlExt}).text(function( index ) {
          return this.text.replace(cExt, urlExt);
        });
    });
});

score 0 · Answer 2 · answered Aug 20 '14 at 17:54

I honestly cannot tell exactly which functionality you want but to create something similar to what is on the site I would just add toggle events into the click event. so it would look something like this:

HTML

<div id="div1">some link</div>
<div id="div2">some other link</div>

JavaScript

// hides the second div initially
$("#div2").toggle();

//switches the divs on click
$( "#div1" ).click(function() {
 $("#div1").toggle();
 $("#div2").toggle();
});

Wow that's interesting, I've never seen an example like that before.. — php die, Aug 20 '14 at 17:58

akinuri · Answer 3 · 2014-08-20T18:14:15.183

Try this

<input type="button" class="extension" value=".com" />
<input type="button" class="extension" value=".net" />
<input type="button" class="extension" value=".info" />
<input type="button" class="extension" value=".org" />
<br><br>
<a href="www.example.com" id="myLink" >www.example.com</a>

$(".extension").click(function() {
    var defaultAddress = "www.example";
    $("#myLink")[0].href = defaultAddress + this.value;
    $("#myLink")[0].innerText = defaultAddress + this.value;
});

Fiddle

Without jQuery

var extensions = document.getElementsByClassName("extension");

for (var i = 0; i < extensions.length; i++) {
    extensions[i].onclick = function() {
        var defaultAddress = "www.example";
        var myLink = document.getElementById("myLink");
        myLink.href = defaultAddress + this.value;
        myLink.innerText = defaultAddress + this.value;
    }
}

Fiddle

How to change hyperlink when button is clicked without reloading page

3 Answers3