Radio Button Event

wilberforce2 · Feb 13, 2007

Hello All

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

Thanks

theniteowl · Feb 13, 2007

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.

wilberforce2 · Feb 14, 2007

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.

monksnake · Feb 14, 2007

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

<.

kaht · Feb 14, 2007

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?

http://www.silkypups.com

[small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]

monksnake · Feb 14, 2007

OHHHH yeah , I'm wrong disregard.

<.

theniteowl · Feb 14, 2007

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.

theniteowl · Feb 14, 2007

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.

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!

Radio Button Event

wilberforce2

IS-IT--Management

theniteowl

Programmer

wilberforce2

IS-IT--Management

monksnake

Programmer

kaht

Programmer

monksnake

Programmer

theniteowl

Programmer

theniteowl

Programmer

Similar threads

Part and Inventory Search

Sponsor