Solved

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

Posted on 2006-11-17
7
323 Views
Last Modified: 2012-08-14
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
Comment
Question by:kasualcom
  • 3
  • 2
  • 2
7 Comments
 
LVL 3

Author Comment

by:kasualcom
Comment Utility
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
 
LVL 5

Expert Comment

by:karlsfre
Comment Utility
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
 
LVL 3

Author Comment

by:kasualcom
Comment Utility
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 5

Accepted Solution

by:
karlsfre earned 500 total points
Comment Utility
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
 
LVL 6

Expert Comment

by:rockymagee
Comment Utility
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
 
LVL 6

Expert Comment

by:rockymagee
Comment Utility
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
 
LVL 3

Author Comment

by:kasualcom
Comment Utility
Thanks a lot , it does exactly what I'd like it to do, and very very simply.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

771 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now