Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to make a html link clickable ONLY once?

Status
Not open for further replies.
lcs01

lcs01

Programmer
Aug 2, 2006
182
US
Hi, Experts,

I am new to javascript. Here is a piece of my html/javascript code:

Code: 
<html>
<head>
<script language="JavaScript" type="text/javascript">

function pending() {
  var buttonObj = document.getElementById('pending');
  var messObj = document.getElementById('pending');
  buttonObj.style.display = 'none';
  messObj.style.display = 'inline';
}
</script>
</head>

<body>
<form method="post" action="..." name="aForm">

<!-- some form values here -->

<a href="" onclick="pending();document.aForm.submit();return false;">Next</a>
<span id="pending" style="display:none">Please wait...</span>

</form>
</body>
</html>

My intention is that once a user clicks the link 'Next' once, he/she will see an unlickable string 'Please wait...'. I know my code not working - the string 'Next' certainly would not go away, though 'Please wait...' does show up.

Could someone show me the correct way to do it?

Many thanks!
 
Sort by date Sort by votes
I'm not sure how to make something unlickable, but you can try this:
Code: 
function removeLink(linkid){
  document.getElementById(linkid).href = '#'
  //or even
  //document.getElementById(linkid).href = 'javascript:return false;'
  document.getElementById(linkid).innerHTML = 'Please Wait...';
	
  //even fancier:
  document.getElementById(linkid).style.textDecoration = 'none';
  document.getElementById(linkid).style.color = '#000000';
}
Code: 
<a href="next.html" id="next_link" onclick="removeLink(this.id);">Next &gt;</a>

_______________
_brian.
 
Upvote 0 Downvote
Thank you, Brian, very much.

However, I don't quite understand your code. When I tested your code, I got ajs runtime error:

document.getElementById(...) is null or not an object.
 
Upvote 0 Downvote
You could try putting your href inside of a div. Using the onClick event of the href you could then set the div display to none. The only drawback being that it would disappear after being clicked. If that's a problem you could try to get creative with z-indexes and once the href is clicked you can use the z-index to put it below another element so that it cannot be clicked on again. Simple code for the disappearing div:
Code: 
<div id="testdiv"><a href="next.html" onClick="document.testdiv.style.display='none';">Next &gt;</a></div>
 
Upvote 0 Downvote
Or you know you can always get the same functionality out of a button, and it's much more straightforward to make a button clickable only once:
Code: 
<input type="button" id="nextbut" value="Next &gt;" onClick="window.location='next.html';this.disabled=true;">
The thing to be careful with when using this method is to have a function that's called onLoad (maybe onUnload too, I don't precisely remember) to make sure that the button is enabled. Otherwise you get people using the Back button on the browser and the button is disabled. Hope this helps!
 
Upvote 0 Downvote
Brian, I tested your code again and did make a little progress. Yesterday, I had a typo in my code and that's why I got a runtime error.

Here is a piece of simplified code:

Code: 
<html>
</head>
<script language="JavaScript" type="text/javascript">

function removeLink(linkid){
alert('in removeLink()');
  document.getElementById(linkid).innerHTML = 'Please Wait...';
}
</script>
</head>
<body>
 <form method="post" action="" name="aForm"> <a id="next_link" href="" onclick="removeLink('next_link');setTimeout(&quot;document.aForm.submit()&quot;,5000);return false;" style="text-decoration:none">Next &gt;</a> </form> </body>
</html>

Once I clicked 'Next >', it did change to 'Please Wait...'. However, 'Please Wait...' is still clickable which is not I want. is there a way to make it unclickable?

Thank you.
 
Upvote 0 Downvote
Tahnk you, ecwcee.

I know how to do it using buttons. I just want to try how to do it with links.

In addition, I tried your code using <div>, I have not been successfull, yet. But I'll update you later.

Thanks again.
 
Upvote 0 Downvote
ok, i figured out what's wrong. try this:
Code: 
function removeLink(linkid){
  mylink = document.getElementById(linkid);
  mylink.innerHTML = 'Please Wait...'; //you change this
  mylink.style.cursor = 'default';
  mylink.style.textDecoration = 'none';
  mylink.style.color = '#000000'; //you can change this
  mylink.href = '#';
  mylink.target = '';
  var btype=0;
  if (window.attachEvent) { b=1; }
  else if (window.addEventListener) { b=2; }
  switch (b) {
    case 1: mylink.attachEvent("onclick","return false"); break;
    case 2: mylink.setAttribute("onclick","return false"); break;
    default: //just give up
  }
}
and this for your link -
Code: 
<a href="[URL unfurl="true"]http://www.google.com/"[/URL] id="google_link" target="_blank" onblur="removeLink(this.id);">google.com</a>

Also note, the only things you need to change are:
1. the commented lines in the javascript
2. the href of the link
3. the id of the link

This is set up so it will get the ID for you and you don't need to change "this.id"

Here's a working demo:
Let me know if you have any issues.

_______________
_brian.
 
Upvote 0 Downvote
Brian,

Thank you so much for you help. I have tested your code lots of times and I found a very strange thing -- your code ONLY does not work with IE, but works very well with firefox.

When I was testing it on IE, I got two errors:
1) permission denied; // this error is from google, I can care less
2) js runtime error: type mismatch, which points to this line:
Code: 
case 1: [b]mylink.attachEvent("onclick","return false")[/b]; break;

with the bold font highlighted.

Isn't this strange? Please help me more. Thank you.
 
Upvote 0 Downvote
I am sorry for my typo in the message above. It should be

Your code does not work with IE, but works very well with firefox.
 
Upvote 0 Downvote
Unfortunately I don't have IE6 installed, but I tested it on IE7. I did get the Error:
Error: Type mismatch.

But it still worked. The only reason i'm adding the onClick is so it doesn't actually try to go to "#", but there's no real harm in it.

_______________
_brian.
 
Upvote 0 Downvote
With 'switch' statment, once you click, 'Please Wait...' becomes UNCLICKABLE. Without that switch statement, 'Please Wait...' can still be clicked, which is not I want.

Unfortunately, I have to support IE 6 & 7. Any more thoughts?

Thanks!
 
Upvote 0 Downvote
Why not run one version of code if the user is on IE6 and another version if the user has IE7. Does this FF and Opera users are ok no matter what version of the code you use?

____________________________________
Just Imagine.
 
Upvote 0 Downvote
Ok, i went back and tested this on another users machine on IE6 and it works fine. I don't understand what your problem is. Yeah, you get a JS error, but it's that so bad. It works. Are you having any problems with it? Please explain.

_______________
_brian.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
626
lexer
lexer
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
576
Rayj0000
Rayj0000
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
698
xwb
xwb
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
649
malpa
malpa
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
753
Kennelbloke
Kennelbloke

Part and Inventory Search

Sponsor

Back
Top