Solved

Javascript: Disable HTML Link On Click and Capture HREF

Posted on 2010-11-15
23
682 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-
Comment Utility

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

Author Comment

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

Expert Comment

by:ddsh79
Comment Utility
you can try this using jquery click event

$("a").click(function(){
   alert(this.href) ;
});
0
 
LVL 14

Expert Comment

by:ddsh79
Comment Utility
well!! forgot to stop the navigation. here it is

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

Author Comment

by:AdrianSmithUK
Comment Utility
Sorry ddsh79, I can't use jquery.

0
 
LVL 13

Expert Comment

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

Expert Comment

by:ddsh79
Comment Utility
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-
Comment Utility
<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-
Comment Utility
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:ddsh79
Comment Utility
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-
Comment Utility
Hi Adrian,

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


Darren



0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:AdrianSmithUK
Comment Utility
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:ddsh79
Comment Utility
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
Comment Utility
Many thanks for the clarification ddsh79.
0
 
LVL 13

Expert Comment

by:darren-w-
Comment Utility
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:ddsh79
Comment Utility
@darren: author has denied use of jquery in reply #34135528
0
 
LVL 13

Expert Comment

by:darren-w-
Comment Utility
ddsh79,

Author asked me to modify code below?
0
 

Author Comment

by:AdrianSmithUK
Comment Utility
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:
ddsh79 earned 250 total points
Comment Utility
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
Comment Utility
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 250 total points
Comment Utility
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:ddsh79
Comment Utility
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
Comment Utility
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
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'…
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…

743 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

18 Experts available now in Live!

Get 1:1 Help Now