enable/disable hyperlink

[jamesmay]

Hi, how can i disable or anable a hyper link from working by selecting a button on the screen?

I have a link below...

<a href="test.asp">test</a>

i want a button called "disable" to disable the hyper link when pressed and enable the hyperlink when reselected. can anyone help?

kindest thanks,

JM

 

[vbkris]

<a href="test.asp" id='TheLink'>test</a>
<input type='button' value="Disable" onclick="document.getElementById('TheLink').href='#'">

Known is handfull, Unknown is worldfull

 

[theboyhope]

href="#" doesn't really disable the link, it will return you to the top of the page. It might be perfectly suitable for what you want though. It's certainly the most robust solution.

If you can't have the link returning them to the top of the page you could return false onclick.

<script type="text/javascript">

    function disableLink( linkID, objButton ) {

        el = document.getElementById( linkID );

	if ( !el.onclick ) {

		el.onclick = function() { return false; };
		objButton.value = "Enable";

	} else {

	        el.onclick = function() { return true; };
		objButton.value = "Disable";
	}
        
    }

</script>

<a href="[URL unfurl="true"]http://www.google.com"[/URL] id='TheLink'>test</a>
<input type='button' value="Disable" onclick="disableLink( 'TheLink', this );">

HTH.

(Hello again everybody btw. I'll try not to leave it so long before I come back next time. ;-))

 

[jamesmay]

Cheers, for replying, is it possible to remove change the text so it doesn't look like a hyperlink?

Regards,

JM

 

[jamesmay]

Is it possible to do somthing like...

when the botton is not selected....


<a href="<%=z(j-1)%>" target="bottom" title="Defect Trend Report for <%=(Recordset1.Fields.Item("C3").Value)%>"><%=(Recordset1.Fields.Item("C3").Value)%></a>

when the button is selected... just show

<%(Recordset1.Fields.Item("C3").Value)%>

 

[theboyhope]

Oops, made a boob with the test condition in that function. You'll figure it out though, eh.

Yeah, it's possible to either change the styles (your first question) or remove the link altogether (your second question).

 

[vbkris]

Plain old disabling: (If # is a problem)
<a href="test.asp" id='TheLink'>test</a>
<input type='button' value="Disable" onclick="document.getElementById('TheLink').href='javascript:;'">



remove the link:
<a href="test.asp" id='TheLink'>test</a>
<input type='button' value="Disable" onclick="document.getElementById('TheLink').removeAttribute('href')">


Known is handfull, Unknown is worldfull

 

[jamesmay]

Thanks for replying this is what i was after! the problem is that when i call the function ten times it does not work...

<script language="JavaScript">
document.getElementById('1').removeAttribute('href');
document.getElementById('2').removeAttribute('href');
document.getElementById('3').removeAttribute('href');
document.getElementById('4').removeAttribute('href');
document.getElementById('5').removeAttribute('href');
document.getElementById('6').removeAttribute('href');
document.getElementById('7').removeAttribute('href');
document.getElementById('8').removeAttribute('href');
document.getElementById('9').removeAttribute('href');
document.getElementById('10').removeAttribute('href');
</script>

<%
dim j
j = 1
while not Recordset1.EOF
if not Isnull(Recordset1("C2")) then
%>
<tr>
<td width="5%" height="20">
<div align="center"><font size="-1"><%=j%></font></div>
</td>
<td width="40%" height="20"><font size="-1"><%=Left((Recordset1.Fields.Item("C2").Value),20)%></font></td>
<td id="<%=Cstr(j)%>" width="45%" height="20"><font size="-1"><a href="<%=z(j-1)%>" target="bottom" title="Defect Trend Report for <%=(Recordset1.Fields.Item("C3").Value)%>"><%=(Recordset1.Fields.Item("C3").Value)%></a></font></td>
<td width="10%" height="20">
<div align="center"><font size="-1" color="#990000"><%=(Recordset1.Fields.Item("Defects").Value)%></font></div>
</td>
</tr>
<%
j = j + 1
end if

Recordset1.MoveNext()


wend
%>

 

[jamesmay]

Sorry my mistake i have fixed it. how do you add the Attribute back when you select the switch again?

regards.

 

[jamesmay]

I have used this when the button is selected...

for (var i=1; i < 11; i++) {
document.getElementById(i).removeAttribute('href');
document.getElementById(i).removeAttribute('target');
document.getElementById(i).removeAttribute('title');
}

i need a simlar function to resore the values..if possible

if not i will need to find another way of sorting this out.

 

[BillyRayPreachersSon]

IDs should not begin with numbers. Change your IDs to begin with letters instead, something like "x1", "x2" ... "x10".

Hope this helps,
Dan

 

[jamesmay]

Hi, i have got it working now but the problem is changing the values back when i reselect the button. Is it possible instead to get the button to replace..

<a href="<%=z(j-1)%>" target="bottom" title="Defect Trend Report for <%=(Recordset1.Fields.Item("C3").Value)%>"><%=(Recordset1.Fields.Item("C3").Value)%></a>

with

<a hrefx="<%=z(j-1)%>" target="bottom" title="Defect Trend Report for <%=(Recordset1.Fields.Item("C3").Value)%>"><%=(Recordset1.Fields.Item("C3").Value)%></a>

this should do what i need it to?

 

[vbkris]

use setAttribute('href','Link')

Known is handfull, Unknown is worldfull

 

[jamesmay]

It works but causes more problems further on in my code. is there a simpler way just to change "href" to "hrefx" and back again on a onClick event? which will stop the hyper link from working?

 

[BillyRayPreachersSon]

You can actually just use the ".disabled" property for a link:

<html>
<head>
	<script type="text/javascript">
	<!--
		function toggleObj(obj) {
			obj.disabled = !obj.disabled;
		}
	//-->
	</script>
</head>

<body>
	Click <a href="[URL unfurl="true"]http://www.google.co.uk"[/URL] id="link1">here</a> to visit Google
	<br />
	Click <a href="[URL unfurl="true"]http://www.yahoo.co.uk"[/URL] id="link2">here</a> to visit Yahoo
	<br />
	Click <a href="javascript:toggleObj(document.getElementById('link1'));">here</a> to toggle the Google link
	<br />
	Click <a href="javascript:toggleObj(document.getElementById('link2'));">here</a> to toggle the Yahoo link
</body>
</html>

Hope this helps,
Dan

 

[theboyhope]

I couldn't actually get that to work, Dan. Same story with your example.

 

[BillyRayPreachersSon]

Update ;o)

This works for me in IE6 and Firefox 0.9:

<html>
<head>
	<script type="text/javascript">
	<!--
		function disableLink(linkObj) {
			if (linkObj.getAttribute('savedHref') == null) {
				linkObj.setAttribute('savedHref', linkObj.getAttribute('href'));
				linkObj.removeAttribute('href');
			}
		}

		function enableLink(linkObj) {
			if (linkObj.getAttribute('savedHref') != null) {
				linkObj.setAttribute('href', linkObj.getAttribute('savedHref'));
				linkObj.removeAttribute('savedHref');
			}
		}

		function toggleLink(linkObj) {
			if (linkObj.getAttribute('savedHref') == null) {
				disableLink(linkObj);
			} else {
				enableLink(linkObj);
			}
		}
	//-->
	</script>
</head>

<body>
	Click <a href="[URL unfurl="true"]http://www.google.co.uk"[/URL] id="link1">here</a> to visit Google
	<br />
	Click <a href="[URL unfurl="true"]http://www.yahoo.co.uk"[/URL] id="link2">here</a> to visit Yahoo
	<br />
	Click <a href="javascript:toggleLink(document.getElementById('link1'));">here</a> to toggle the Google link
	<br />
	Click <a href="javascript:toggleLink(document.getElementById('link2'));">here</a> to toggle the Yahoo link
</body>
</html>

Hope this helps,
Dan

 

[jamesmay]

I have tried the above method which works fine but i think it is just a little OTT for what i need. I simply just need to replace "href" with "hrefx" to disable/enable the hyperlink when selecting the button. Surely there is a simpler way to do this?

kindest thanks?

JM

 

[BillyRayPreachersSon]

i think it is just a little OTT for what i need

Then maybe you should have specified in your original post that you wanted "simple solutions only"

Given that you didn't, and given that peole have been really trying to help you out here, don't you think you could be a bit more grateful that a working solution has been posted?

My solution isn't complex, and isn't OTT. If you don't understand it, then say so, and I will explain it to you. But please don't put valid solutions down when they match your initial "spec". Instead, agree that your initial "spec" may not have been up-to-scratch, amend it to include details of "how complex" or "how simple" a solution you would like (how do you measure complexity? Bytes count of code? Number of lines? What?), repost it, and maybe you'll get a different solution.

Dan

 

[BabyJeffy]

Nice use of setAttribute() there Dan. I keep forgetting that you can store data in an object like that.

Jeff