asp.net page reloading on javascript onclick function

Question

Hi guys,

Novice question I guess:

The Scenario:
I have an asp.net page that contains 6 divs and 6 hyperlinks which are linked to javascript function:

function showdiv(divname)
{
   hideallcontentdivs();
   var targetdiv = document.getElementById(divname);
   targetdiv.style.display="block";
}

var alldivs=new Array();
function hideallcontentdivs()
{
   alldivs=document.getElementsByTagName("div");
   for(var i=0; i<alldivs.length;i++)
   {
      if(alldivs[i].className=="content")
      {
         alldivs[i].style.display="none";
      }
   }
}

ImageButton:

<a href="" onclick="showdiv('item1');"><img alt="alternate_text" src="imagesource" border="0px" /></a>

the divs have id's: item1, item2....item6 and the hyperlink specify to the javascript function the id of the div that needs to displayed.

The Problem:
Whenever I click on an hyperlink, the effect that I want is achieved but the page reloads too. Don't really know where I'm going wrong but if anyone could guide me in the right direction, I'll be very very thankful.

Thanks

Answer 1

Just return false on click

onclick="showdiv('item1');return false;"

Update:I just point the issue :), you can return the false where ever you like.

onclick="return showdiv('item1');"

and say to showdiv() to return false

Answer 2

always, return false :)

but i'd rather put it in the function

function showdiv(divname)
{
   hideallcontentdivs();
   var targetdiv = document.getElementById(divname);
   targetdiv.style.display="block";
   return false;
}

Answer 3

+1 for Aristos' answer, although if you refactor the return false; to the end of the showdiv function you want have to update all the links.

Answer 4

You should add return false to your onclick handler. This prevents the default behaviour of the link.

A better solution would be to use jQuery or some other library and attach the event to the element. They also contain special functions to prevent the default behaviour:

Html:

<a id="button1" href="#"><img alt="alternate_text" src="imagesource" /></a>

Javascript/jQuery:

$('#button1').click(function(event) {
    $('div').hide();        // hides all divs
    $('#div1').show();      // shows the div with the id 'div1'
    event.preventDefault(); // prevents postback
});

Answer 5

return false is the key, as the other answers have said.

Just to add my tuppence though: you don't really need to use an anchor here and imho it's not good semantic style. Just use a span or div instead, and then the problem goes away.