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!

Radio Button Event

Status
Not open for further replies.
wilberforce2

wilberforce2

IS-IT--Management
Jan 8, 2007
36
GB
Hello All

Is it possible to cancel an onclick event on a radio button on a form of it is already clicked?

Thanks

 
Sort by date Sort by votes
Not easily, but you could add a test in whatever function you call to see if the radio is already selected before allowing the rest of the actions to be performed.

At my age I still learn something new every day, but I forget two others.
 
Upvote 0 Downvote
I have tried:

Code: 
onclick="if (this.checked==false) {checkDirectorySelected(this.value);} else {alert('Aready Checked');}"

However this does not work. Any ideas my knowlegege of Javascript is at the beginner level.

Thanks for any ideas.
 
Upvote 0 Downvote
Just check to see if it's already clicked in the top of the function that you call on the onclick, and pass the object, not just the value:

Code: 
onclick="checkDirectorySelected([!]this[/!])"

Your function would do something like this at the top:
Code: 
function checkDirectorySelected(obj) {
   if (obj.checked) {
      alert("Already checked");
      return false;
   }
   else {  
      var objValue = obj.value;
      //Do what you already do
   }
}


<.

 
Upvote 0 Downvote
The problem is that you're using the wrong event handler. The onclick handler does not get fired until after the mouse button has been released. At this time the checked status has already been applied to the radio button. This means that you'll get the alert message every time you click the button. So, the solution is a simple change of the event handler:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">

function clickCheck(obj) {
   if (obj.checked) {
      alert("Already checked");
   }
}

</script>
<style type="text/css"></style>
</head>
<body>

<input type="radio" [!]onmousedown[/!]="clickCheck(this)" name="blah" /><br />
<input type="radio" name="blah" />

</body>
</html>

-kaht

Looking for a puppy? [small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]
 
Upvote 0 Downvote
My response got swallowed by the system.
Usually when the system does not respond I can just backup to the screen I entered the message on and wait to hit submit again but this time it wiped it out. *Sigh*

Anyway, as kaht has already pointed out the onclick event fires AFTER you have changed the state of the radio box so of course it will always show that it was checked because you just checked it.
You need to test what the state was prior to the onclick which is what kaht's example above shows using the onmousedown event. The only problem with this is that if the users tabs to the field and hits the spacebar in order to select the field then the onmousedown is not going to fire.

My solution was this:
First, set a global variable on the page to store the state of that button in.
Code: 
var R1State = false;

Then use something like this in your HTML
Code: 
<input type="radio" name="R1" value="T" onfocus="R1State = this.checked;" onclick="if (R1State) {alert('Already Checked');} else {alert('Newly Checked')};">
<input type="radio" name="R1" value="R">

I use the onfocus event to test the current state of the radio button and store it in the global variable R1State.
Then I use the onclick event to test the value of R1State rather than testing the radio button directly because if you just clicked on the radio button you KNOW it will be checked.

I do not know if this will be cross-browser friendly, sometimes the methods for handling events or the order they occur in vary between browsers but it works in IE6.

To make it more robust you would have a separate function and in that function you would keep track of the state of whatever radio buttons you needed to check. You would call that function from the onclick event rather than from onfocus.


At my age I still learn something new every day, but I forget two others.
 
Upvote 0 Downvote
BTW, in IE6 with multiple radio buttons of the same name if none have been checked then tabbing will bring you only to the first of the group, otherwise tabbing brings you to the radio button that IS checked. I am not sure if the same holds true in other browsers. It would seem to me that you should be able to tab to all radio buttons.

Also, in IE6 the onclick event is fired when the field has focus and the spacebar is pressed as well as when the mouse is used to click on the field. I am not sure if this behaviour is the same in other browsers either.

At my age I still learn something new every day, but I forget two others.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

TheLazyPig
  • Question
Buttons not aligned after another button is clicked
Replies
2
Views
190
gmmastros
gmmastros
berkshirea
  • Locked
  • Question
Radio Button Clicked, Another Radio Becomes Mandatory 1
Replies
2
Views
556
berkshirea
berkshirea
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
574
Rayj0000
Rayj0000
TheLazyPig
  • Locked
  • Question
Disable radio button after edit button click
Replies
1
Views
173
xwb
xwb
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
254
Daniel K
Daniel K

Part and Inventory Search

Sponsor

Back
Top