href and onclick

Question

Hi all,

I have 2 requirements:

1. There are some messages and i have to navigate through these messages on tab out, i.e if i click tab the control should move from one message to another and so on, All the messages should be links.

   This can be doing by using href.

2. If i click on these messages a function is called which actually sets the focus for the corresponding field. like if i have a name field and if i enter number a error message comes and clicking on this message the control goes to the corresponding field.

i added a href: javascript (function) in anchor tag

this works properly in IE7, but it doesnt work in IE6 i get a new window opened with true or false value. If i use onclick and remove href it works properly in IE6 but the navigation doesnt happen.

Is there any other alternative where both the navigation and onclick works or something else needs to be added.

Please help me regarding this issue.

Thanks in advance.

Regds viswa

Answer 1

Try returning false in the links' href attributes, or using an '#null'. Bottom line, you should not get rid of the href for anchor tags as they will no longer be navigable via the tab key:

<a href="javascript:return false" onclick="doSomething()">Foo</a>

or:

<a href="#null" onclick="doSomething()">Foo</a>

Answer 2

You could use unobtrusive JS rather than inline, then you just need the href.

<a href="/foo" class="fooLink">Foo</a>

The in a document ready function (Assuming you're using jQuery, can be easily changed to Prototype or vanilla js)

  $(".fooLink").click(function() {
     doSomething();
  });

Answer 3

You might consider not using using an anchor tag. Anchor tags should be reserved for Navigation.

Have you thought of the <label> tag?

<label for="foo">This is Foo</label>
<input type="text" id="foo" value="" />

Clicking on the label will give the input the focus.

Answer 4

Hi

Thanks for the solutions

My code is something like this

sb.append("\">>>);return false\"> "+error+" - "+Desc+"");

however inspite of returning false, the browser opens a new window

incase of href=# , it opens the directory of my application listing the pages in it

if i use href=javascript(void)

it opens new page with url href=javascript(void)

How can i prevent the opening of new window

Form fields cant be used since the content is dynamic in nature

And this issue is happening only in IE6 , in IE7 it works fine

Thanks in advance