Javascript: Disable HTML Link On Click and Capture HREF

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");

AdrianSmithUKAsked:
Who is Participating?
 
Dushyant SharmaConnect With a Mentor Commented:
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
 
darren-w-Commented:

<a href="http://www.google.com" onclick="alert(this.href); return false;">Google</a>
0
 
AdrianSmithUKAuthor Commented:
Sorry Darren, I can't modify the link.
0
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

 
Dushyant SharmaCommented:
you can try this using jquery click event

$("a").click(function(){
   alert(this.href) ;
});
0
 
Dushyant SharmaCommented:
well!! forgot to stop the navigation. here it is

$("a").click(function(){
   alert(this.href) ;
   return false;
});
0
 
AdrianSmithUKAuthor Commented:
Sorry ddsh79, I can't use jquery.

0
 
darren-w-Commented:
$("a").click(function(){
if (this.href ==''){
return false;
}
alert(this.href);
$(this).removeAttr('href');
return false;
});
0
 
Dushyant SharmaCommented:
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
 
darren-w-Commented:
<a href="http://www.google.com" onclick="if (this.href!=null)alert(this.href); this.removeAttribute('href',0);return false;">Google</a>
0
 
darren-w-Commented:
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
 
Dushyant SharmaCommented:
you'll also require onload event. here is the reference.

http://www.thewebgoodies.com/2010/10/18/javascript-window-onload-event-complete/
0
 
darren-w-Commented:
Hi Adrian,

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


Darren



0
 
AdrianSmithUKAuthor Commented:
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
 
Dushyant SharmaCommented:
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
 
AdrianSmithUKAuthor Commented:
Many thanks for the clarification ddsh79.
0
 
darren-w-Commented:
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
 
Dushyant SharmaCommented:
@darren: author has denied use of jquery in reply #34135528
0
 
darren-w-Commented:
ddsh79,

Author asked me to modify code below?
0
 
AdrianSmithUKAuthor Commented:
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
 
AdrianSmithUKAuthor Commented:
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
 
darren-w-Connect With a Mentor Commented:
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
 
Dushyant SharmaCommented:
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
 
AdrianSmithUKAuthor Commented:
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
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.