Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Disable hyperlink after clicking it

Posted on 2006-06-21
8
Medium Priority
?
4,976 Views
Last Modified: 2012-06-27
I have a hyper link defined as follows:

<a href='...' id='submitButton'><img src="img/submit.gif" border="0"></a>

When the link is clicked, I would like to disable this link. Can it be done?

Thanks!
0
Comment
Question by:yongsing
8 Comments
 
LVL 16

Expert Comment

by:Swapnil Piparia
ID: 16950504
Hi yongsing,

it is not possible to disable hyperlink, but you can hide hyperlink after click on it once.

by document.all.hyperlinkname.style.display = 'none'
and for showing it back document.all.hyperlinkname.style.display = ''


Regards,
NetSwap
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 16950679
It is possible.
Like this:



<a href='http://www.experts-exchange.com/Q_21893830.html' id='submitButton' onClick="this.onclick=function(){return false}" target="EE"><img src="img/submit.gif" border="0"></a>

The target is only for demo. It works also for target="_self".


0
 
LVL 7

Expert Comment

by:geordie007
ID: 16950700

Netswap is right, but beware. the document.all method is an old internet explorer reference. nowadays, all modern browsers - including internet explorer - use document.getElementById. using your example, you could do this:

document.getElementById('submitButton').style.display = 'none';

this would remove it completely though, so you would get document flow issues, as any content below it would move up, any content to the right, would move across, etc. to combat that you could say:

document.getElementById('submitButton').style.visibility= 'hidden';

of course, you may want to keep the image there, but simply make it so that it didn't work anymore. to do this, you could change the href of the link, like this:

<script type="text/javascript">
var clicked = false;
function isClicked(){
      if(clicked){
      document.getElementById('submitButton').href = "javascript:;";
      }
      clicked = true;
}
</script>

<a href="(MY ORIGINAL LINK OR FUNCTION)" onclick="isClicked()" id="submitButton"><img src="img/submit.gif" border="0"></a>

the first time it's clicked, clicked is false, so it doesn't change the href, and your original action happens. the second time its clicked, clicked is now true, so it sets your href to "javascript:;", which is the equivalent of "do nothing at all".

hope this helps.
0
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 30

Expert Comment

by:callrs
ID: 16950783
Just created & tested this. It works! : )
change http://www.google.com to the link you want your user to go to.

<a href=""' id='submitButton'  onclick="this.outerHTML='<img src=img/submit.gif border=0>';window.open('http://www.google.com');"><img src="img/submit.gif" border="0"></a>
0
 
LVL 30

Accepted Solution

by:
callrs earned 120 total points
ID: 16950792
Even better:
<a href=""' id='submitButton'  onclick="this.outerHTML=this.innerHTML;window.open('http://www.google.com');"><img src="img/submit.gif" border="0"></a>
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 16950977
document.all and this.outerHTML is IE only.
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 16952923
I like Zvonko's since it is cross browser and quite elegant :D *bows down* heh (ok, this comment is probably just wasted space, but I did really like it; I would've never thought to set its onclick to return false, lol)

Ted
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 16955060
Thanks Ted :)
0

Featured Post

[Webinar] Cloud Security

In this webinar you will learn:

-Why existing firewall and DMZ architectures are not suited for securing cloud applications
-How to make your enterprise “Cloud Ready”, and fix your aging DMZ architecture
-How to transform your enterprise and become a Cloud Enabler

Question has a verified solution.

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

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

972 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