Issue with <a href='#' onclick=callfunction()>Click me!</a>

Alright, I'm not really sure if I'm doing any of this the right way but here's what I've done...

I've created an AJAX web page and would like to use regular <a> links as the controls to modify the data on the page. I can do this by using
<a href='#' onclick='callfunction()'>Click me!</a>

Only problem is because I have the '#' symbol for the href it pops me back up to the top of the page. If I take the '#' out of the href then the onclick function does not get called.

What I'm looking for is a way to use <a> tags to call an onclick javascript function without distruption page orientation.

If I use buttons to do this
<input type='button' value='Click me' onclick='callfunction()'>

It works exactly how I'd like it to, minus the buttons look completely out of place with the rest of the site.

Any ideas?
LVL 3
kasualcomAsked:
Who is Participating?
 
karlsfreConnect With a Mentor Commented:
Try adding another entry to CSS:

a {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
        text-decoration: underline;
        color: #00AA21
}
0
 
kasualcomAuthor Commented:
Ok, I spoke to soon, I can get it to work, but now my only problem is my css code for <a> tags does not apply to it any thoughts on that?

To get it to work I took out the href='' completely.
0
 
karlsfreCommented:
Just a few quick questions:

What does your CSS like?
Does the CSS style get applied for other <a> tags on the page?
What browser do you use?
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
kasualcomAuthor Commented:
CSS:

a:link {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
        text-decoration: underline;
        color: #00AA21
}
a:active {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        text-decoration: none;
        color: #00AA21
}
a:visited {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
        text-decoration: underline;
        color: #00AA21
}
a:hover {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        text-decoration: none;
        color: #00AA21
}

It does work for the other  <a> tags

I'm currently using FireFox 2.0
0
 
rockymageeCommented:
If you copy and paste this into a balnk .htm or whatever page it seems to work fine:

<style type="text/css">
<!--
a:link {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
        text-decoration: underline;
        color: #00AA21
}
a:active {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        text-decoration: none;
        color: #00AA21
}
a:visited {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
        text-decoration: underline;
        color: #00AA21
}
a:hover {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        text-decoration: none;
        color: #00AA21
}
-->
</style>
            
      
<body>
<a href='#' onclick='callfunction()'>Click me!</a>
</body>
0
 
rockymageeCommented:
As far as not disrupting the page orientation I think you are going to have to submit the function via a form like so:

<form action="#" onsubmit="callfunction()">
<!-- Use your link to submit the form -->
</form>

Be sure to put the <form> tags outside on any table rows if you are using HTML table tags ...
0
 
kasualcomAuthor Commented:
Thanks a lot , it does exactly what I'd like it to do, and very very simply.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.