[Last Call] Learn how to a build a cloud-first strategyRegister Now


What is the correct syntax with <a.... and onclick / javascript

Posted on 2009-04-21
Medium Priority
Last Modified: 2012-05-06
I need to make a link that will call a javascript function with AJAX.
I don't want to use <a href="#"... because it go to the top of the page.
I need something like this:
<a onClick="javafunction()" href=????>xxxxx</a>
without the href, it is not clickable as you know.
With the #, it go the top => Not good.
I heard about something like <a href="javascript:javafucntion()"..... it does not seem to work   and been told that it's a wrong way to call a function.
Someone can help me about this ????
Some explanation also ?
Many thanks.
Question by:bruno_boccara
  • 3
  • 3
  • 2
  • +1
LVL 19

Expert Comment

ID: 24199228
can you just create a div and apply onClick event to it

Expert Comment

ID: 24199307
You can do it easily by:

<a onClick="javafunction()" href="javascript:void(0);">xxxxx</a>
<a href="javascript:javafunction();">xxxxx</a>
//both will work fine

Open in new window

LVL 19

Expert Comment

ID: 24199364
this the correct syntax
<a href="javascript:welcomepage();" title="Welcom">text</a>
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

LVL 12

Accepted Solution

alien109 earned 2000 total points
ID: 24199396
probably the best method is

<a href="#" onclick="function();return false;">link</a>
LVL 12

Expert Comment

ID: 24199423
if you return false from the onclick function, your page will not jump to the top of the page.

using href="javascript:.... can fire the event twice in some browsers

also, if you provide an acutal url in the href for the link, you can have unobtrusive javascript.

Expert Comment

ID: 24201429
There was a comment by author as below:

"without the href, it is not clickable as you know.
With the #, it go the top => Not good."

it clearly means that he doesn't want to keep "#" on href.

And I also personally dont like that as it jumps to the top of the page.

and I have used
href="javascript:void(0);" in almost all of my site and it works fine atleast in

FF, IE(All versions), Safari(Mac and Win), Opera, and Flock.

Any other browsers then this I haven't tested.
LVL 12

Expert Comment

ID: 24201483
hard2u2001 - Read my post.

If the handler function returns false, it will prevent the browser from navigating to the link. In other words, the page will not scroll to the top. Event handling 101.

Expert Comment

ID: 24201834
Ok buddy got ur point.
Didn't wanted  be rude here...

But I still can't agree with ur this statement
"using href="javascript:.... can fire the event twice in some browsers"

coz that works fine for me always.

nodoubt if u write like

<a onClick="javafunction()" href="javascript:anotherFunction(0);">xxxxx</a>

then it will fire both the functions...


Author Closing Comment

ID: 31573029
I checked in different forums and it seems to be the best method.
Many Thanks to alien and to everyone who tried to help me.

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question