?
Solved

Javascript: Disable HTML Link On Click and Capture HREF

Posted on 2010-11-15
23
Medium Priority
?
709 Views
Last Modified: 2012-05-10
Greetings!

Can you help me with this javascript issue?

I would like to be able to:

1. Click on a link
2. Prevent its natural navigation
3. Disable the link after click
4. Produce an alert showing the value of href.

For example:

1. I have a page called myPage.html
2. It has the following link:

 <a href="http://www.google.com">Google</a>

3. When the user clicks it I want the portal to remain (ie: not navigate away and reload the original page) on myPage.html and the following alert to show: alert("http://www.google.com");

0
Comment
Question by:AdrianSmithUK
  • 8
  • 8
  • 7
23 Comments
 
LVL 13

Expert Comment

by:darren-w-
ID: 34135404

<a href="http://www.google.com" onclick="alert(this.href); return false;">Google</a>
0
 

Author Comment

by:AdrianSmithUK
ID: 34135444
Sorry Darren, I can't modify the link.
0
 
LVL 14

Expert Comment

by:Dushyant Sharma
ID: 34135478
you can try this using jquery click event

$("a").click(function(){
   alert(this.href) ;
});
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 14

Expert Comment

by:Dushyant Sharma
ID: 34135490
well!! forgot to stop the navigation. here it is

$("a").click(function(){
   alert(this.href) ;
   return false;
});
0
 

Author Comment

by:AdrianSmithUK
ID: 34135528
Sorry ddsh79, I can't use jquery.

0
 
LVL 13

Expert Comment

by:darren-w-
ID: 34135560
$("a").click(function(){
if (this.href ==''){
return false;
}
alert(this.href);
$(this).removeAttr('href');
return false;
});
0
 
LVL 14

Expert Comment

by:Dushyant Sharma
ID: 34135603
not a problem. you can use event listener to attach click event using pure javascript.

http://www.quirksmode.org/js/events_advanced.html
http://www.javascriptkit.com/domref/windowmethods.shtml



0
 
LVL 13

Expert Comment

by:darren-w-
ID: 34135625
<a href="http://www.google.com" onclick="if (this.href!=null)alert(this.href); this.removeAttribute('href',0);return false;">Google</a>
0
 
LVL 13

Expert Comment

by:darren-w-
ID: 34135627
Actually, the above is slightly wrong:
<a href="http://www.google.com" onclick="if (this.href!='')alert(this.href); this.removeAttribute('href',0);return false;">Google</a>
0
 
LVL 14

Expert Comment

by:Dushyant Sharma
ID: 34135628
you'll also require onload event. here is the reference.

http://www.thewebgoodies.com/2010/10/18/javascript-window-onload-event-complete/
0
 
LVL 13

Expert Comment

by:darren-w-
ID: 34135700
Hi Adrian,

You should find that my line above satisfies your original requirements?


Darren



0
 

Author Comment

by:AdrianSmithUK
ID: 34135709
Darren, I'm getting confused now. Remember that I can't modify the link.

Also I tried to run the function in post 34135560 and got default behaviour.

Could you modify the code below?

Kind Regards,

Adrian
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">

$("a").click(function(){
	if (this.href ==''){
	return false;
	}
	
	alert(this.href);
	
	$(this).removeAttr('href');
	return false;
});

</script>

</head>

<body>

<a href="http://www.google.com">Google</a>

</body>
</html>

Open in new window

0
 
LVL 14

Expert Comment

by:Dushyant Sharma
ID: 34135724
the code above is jquery.

you have two options without jqery.

1. change the <a> tag.
2. use basic event bind using javascript and set the function in window.onload.
0
 

Author Comment

by:AdrianSmithUK
ID: 34135755
Many thanks for the clarification ddsh79.
0
 
LVL 13

Expert Comment

by:darren-w-
ID: 34135771
This should work,

I've added the link to the jquery library and a bit more
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">

$(function(){$("a").click(function(){
	if (this.href ==''){
	return false;
	}
	
	alert(this.href);
	
	$(this).removeAttr('href');
	return false;
});
});

</script>

</head>

<body>

<a href="http://www.google.com">Google</a>

</body>
</html>

Open in new window

0
 
LVL 14

Expert Comment

by:Dushyant Sharma
ID: 34135785
@darren: author has denied use of jquery in reply #34135528
0
 
LVL 13

Expert Comment

by:darren-w-
ID: 34135795
ddsh79,

Author asked me to modify code below?
0
 

Author Comment

by:AdrianSmithUK
ID: 34135843
Sorry Darren, that was before ddsh79 pointed out that it was jquery code. As I pointed out in the 5th note from the top, I can't use jquery. It must be javascript.

Kind Regards,
0
 
LVL 14

Accepted Solution

by:
Dushyant Sharma earned 1000 total points
ID: 34136018
i got this working for firefox. you can refer the above urls to make this work of ie.



window.onload = clickbind;
function clickbind(){
    var aitem=document.getElementsByTagName("a");
    for(var i=0;i<aitem.length;i++){
        if (document.addEventListener){
        aitem[i].addEventListener("click",removeclick,false);
        }
    }
}
function removeclick(){
    alert(this.href);
}

Open in new window

0
 

Author Comment

by:AdrianSmithUK
ID: 34136776
Hi ddsh79

Nearly perfect accept for one thing.

The page still goes to google.com after the alert is cancelled.

For further info see (example) note 3 in the first post.

Is there a way to override the normal html <a> behaviour?

Kind Regards,



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">

window.onload = clickbind;
function clickbind(){
    var aitem=document.getElementsByTagName("a");
    for(var i=0;i<aitem.length;i++){
        if (document.addEventListener){
        aitem[i].addEventListener("click",removeclick,false);
        }
    }
}
function removeclick(){
    alert(this.href);
}

</script>

</head>

<body>

<a href="http://www.google.com">Google</a>

</body>
</html>

Open in new window

0
 
LVL 13

Assisted Solution

by:darren-w-
darren-w- earned 1000 total points
ID: 34136990
modify the function like so (taken code from my example):

function removeclick(){
if (this.href!=null) alert(this.href);
this.removeAttribute('href',0);
return false;    
}
0
 
LVL 14

Expert Comment

by:Dushyant Sharma
ID: 34137063
here it is. have not checked on ie.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">

window.onload = clickbind;
function clickbind(){
    var aitem=document.getElementsByTagName("a");
    for(var i=0;i<aitem.length;i++){
        if (document.addEventListener){
            aitem[i].onclick=removeclick;
        }
    }
}
function removeclick(){
    alert(this.href);
    return false;
}

</script>

</head>

<body>

<a href="http://www.google.com">Google</a>

</body>
</html>

Open in new window

0
 

Author Comment

by:AdrianSmithUK
ID: 34137100
Many thanks chaps.

Here is the final solution.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">

window.onload = clickbind;
function clickbind(){
    var aitem=document.getElementsByTagName("a");
    for(var i=0;i<aitem.length;i++){
        if (document.addEventListener){
        aitem[i].addEventListener("click",removeclick,false);
        }
    }
}

function removeclick(){
	if (this.href!=null) alert(this.href); 
	this.removeAttribute('href',0);
	return false;    
}

</script>

</head>

<body>

<a href="http://www.google.com">Google</a>

</body>
</html>

Open in new window

0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering 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

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…
Suggested Courses

829 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