Solved

Javascript: Disable HTML Link On Click and Capture HREF

Posted on 2010-11-15
23
684 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
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 
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 250 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 250 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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Suggested Solutions

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

776 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