• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 354
  • Last Modified:

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?
0
kasualcom
Asked:
kasualcom
  • 3
  • 2
  • 2
1 Solution
 
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
 
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
karlsfreCommented:
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
 
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

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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.

  • 3
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now