By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,566 Members | 1,749 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,566 IT Pros & Developers. It's quick & easy.

Prevent RadioButton Selection

Frinavale
Expert Mod 5K+
P: 9,731
I am trying to ask the user for confirmation before a radio button is selected.

Currently I'm handling the radio button's onclick event, asking the user to confirm their action and if they hit the 'cancel' button call the preventDefault() method for the event to cancel it.

It cancels the event if a selection has already been made for the radio button group (it actually selects it, the reverts it back to it's original value when the preventDefault() method is called) The problem I'm having is that the radio button is selected regardless of stopping the event if no previous selection has been made. When a radio button is not part of a group of radio buttons this radio button is always selected.

If you take the following code and past it into the code pane in the w3c schools try-it utility (click hit the 'Edit and Click Me' button) you'll get a good idea of what I"m trying to explain (Please note the following code does not work in IE)
Expand|Select|Wrap|Line Numbers
  1. <html>
  2.   <head>
  3.     <script type="text/javascript">
  4.     function doClick(e){
  5.       if(confirm("are you sure?")==false){
  6.         e.preventDefault();
  7.         e.stopPropagation();
  8.         return false;
  9.       }
  10.       return true;
  11.     }
  12.     </script>
  13.   </head>
  14.   <body>
  15.     <form>
  16.       <input type="radio" name="radio1" onclick="doClick(event);" />x
  17.       <input type="radio" name="radio1" onclick="doClick(event);" />y
  18.       <input type="radio" name="radio1" onclick="doClick(event);" />z
  19.     </form>
  20.   </body>
  21. </html>
Apr 20 '09 #1
Share this Question
Share on Google+
6 Replies


Frinavale
Expert Mod 5K+
P: 9,731
The only way I was able to get around this was to check if the radio button had a selection to begin with (when the page is loaded) ...then later check if this value is true or false. If it didn't have a selection when the page is loaded, loop through the radio buttons and deselect each one.

This is not a clean solution and I don't know how I'm going to implement it in my application without storing some sort of array of booleans....

Expand|Select|Wrap|Line Numbers
  1. <html>
  2.   <head>
  3.     <script type="text/javascript">
  4.     var radioIsSelected;
  5.     function doClick(e){
  6.       if(confirm("are you sure?")==false){
  7.         if(radioIsSelected == false){
  8.           var radio1 = document.getElementsByName('radio1');
  9.           for(var i=0; i<radio1.length; i++)
  10.           { 
  11.             radio1[i].checked = false;
  12.           }
  13.         }
  14.         e.preventDefault();
  15.         e.stopPropagation();
  16.         return false;
  17.       }else{
  18.         radioIsSelected = true;
  19.       }
  20.       return true;
  21.     }
  22.     function checkChecked(){
  23.       var radio1 = document.getElementsByName('radio1');
  24.       radioIsSelected = false;
  25.       for(var i=0; i<radio1.length && radioIsSelected==false ; i++)
  26.       { 
  27.         if(radio1[i].checked){
  28.           radioIsSelected = true;
  29.         }
  30.       }
  31.     }
  32.     </script>
  33.   </head>
  34.   <body onload="checkChecked();">
  35.     <form>
  36.       <input type="radio" name="radio1" onclick="doClick(event);" />x
  37.       <input type="radio" name="radio1" onclick="doClick(event);" />y
  38.       <input type="radio" name="radio1" onclick="doClick(event);" />z
  39.     </form>
  40.   </body>
  41. </html>

Does anyone know a way around this problem that doesn't involve checking whether or not the radio button has a selection on page load?

-Frinny
Apr 20 '09 #2

Frinavale
Expert Mod 5K+
P: 9,731
I found a better way :)
Again, I'm not sure if this works in IE because I haven't tried it there yet but there is a defaultChecked property for radio buttons.

All I had to do was set the checked property to the defaultChecked property during the cancel action:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2.   <head>
  3.     <script type="text/javascript">
  4.     function doClick(e){
  5.       if(confirm("are you sure?")==false){
  6.         e.target.checked = e.target.defaultChecked;
  7.         e.preventDefault();
  8.         e.stopPropagation();
  9.         return false;
  10.       }
  11.       return true;
  12.     }
  13.     </script>
  14.   </head>
  15.   <body>
  16.     <form>
  17.       <input type="radio" name="radio1" id="xRadio" onclick="doClick(event);" />x
  18.       <input type="radio" name="radio1" id="yRadio" onclick="doClick(event);" />y
  19.       <input type="radio" name="radio1" id="zRadio" onclick="doClick(event);" />z
  20.     </form>
  21.   </body>
  22. </html>
Apr 21 '09 #3

acoder
Expert Mod 15k+
P: 16,027
For IE, use:
Expand|Select|Wrap|Line Numbers
  1. e.returnValue = false;
  2. e.cancelBubble = true;
Test for support of the DOM standard methods and, if not present, try these statements for IE.
Apr 21 '09 #4

Frinavale
Expert Mod 5K+
P: 9,731
I tested what you've suggested.

It sort of works. It works when there is no default selection and cancel the action (the option is unselected); however, if there is a default selection and the user cancels the action, the previous selection is lost: the option is unselected but the previously selected option is not re-selected.

I'm going to look into this further tomorrow.

This is what I've been testing with:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2.   <head>
  3.     <script type="text/JavaScript">
  4.       function doClick(e){
  5.         if(confirm("are you sure?")==false){
  6.           try{
  7.             e.target.checked = e.target.defaultChecked;
  8.             e.preventDefault();
  9.             e.stopPropagation();
  10.             return false;
  11.           }catch(ex){
  12.             e.returnValue = false;
  13.             e.cancelBubble = true;
  14.             return true;
  15.           }
  16.         }
  17.         return true;
  18.       }
  19.     </script> 
  20.   </head>
  21.   <body>
  22.     <input type="radio" name="radio1" id="xRadio" onclick="doClick(event);" />x
  23.     <input type="radio" name="radio1" id="yRadio" onclick="doClick(event);" />y
  24.     <input type="radio" name="radio1" id="zRadio" onclick="doClick(event);" />z
  25.   </body>
  26. </htm>
Thanks acoder :)
Apr 21 '09 #5

Frinavale
Expert Mod 5K+
P: 9,731
Well I finally got back to looking into this problem.

When using the defaultChecked property to reset the target's checked value in FireFox, the radio button that was previously selected is re-selected.

When using the defaultChecked property to reset the target's (the sourcElement's) checked value in IE, the radio button that was previously selected is not reselected.

So, in order to determine which radio button was previously selected, this script stores the default selection in a variable named selectedDefault. It uses this stored radio button to reset the selection if the user cancels.

Expand|Select|Wrap|Line Numbers
  1. <html>
  2.   <head>
  3.  
  4.     <script type="text/javascript">
  5.     var selectedDefault; // used to remember the radio button selected 
  6.     function doClick(e){
  7.       if(confirm("are you sure?")==false){
  8.         try{
  9.           // FireFox case.
  10.           // Setting the target.checked property to the defaultChecked will
  11.          // deselect the current radio button and select the radio button that
  12.          // was previously selected.
  13.           e.target.checked = e.target.defaultChecked;
  14.           e.preventDefault();
  15.           e.stopPropagation();
  16.         }catch(ex){
  17.           // Internet Explorer case.
  18.           // Setting the target.checked property to the defaultChecked does not
  19.          // deselect the current radio button and select the radio button that
  20.          // was previously selected.
  21.  
  22.          // The following selects the radio button that was previously selected
  23.           if(selectedDefault){
  24.             selectedDefault.checked = true;
  25.           }
  26.           //Deselecting the radio button that was the event's target
  27.           e.srcElement.checked = false;
  28.  
  29.           //Preventing the event from continuing
  30.           e.returnValue = false;
  31.           e.cancelBubble = true;
  32.         }
  33.         return false;
  34.       }else{
  35.         if(e.srcElement){
  36.           selectedDefault = e.srcElement;        
  37.         }
  38.       }
  39.  
  40.       return true;
  41.     }
  42.  
  43.  
  44.    // This function is called to set the initial value of the selectedDefault 
  45.     function initializeDefaultSelection(){
  46.       var radioButtons = document.getElementsByName('radio1');
  47.       for(var i=0; i<radioButtons.length; i++)
  48.       { 
  49.         if(radioButtons[i].checked){
  50.          selectedDefault = radioButtons[i];
  51.         }
  52.       }
  53.     }
  54.     </script>
  55.   </head>
  56.   <body>
  57.     <form>
  58.       <input type="radio" name="radio1" id="xRadio" onclick="doClick(event);" />x
  59.       <input type="radio" checked name="radio1" id="yRadio" onclick="doClick(event);" />y
  60.       <input type="radio" name="radio1" id="zRadio" onclick="doClick(event);"/>z
  61.  
  62.       <script type="text/javascript"> 
  63.         try{
  64.           // When the window is loaded, this calls the method that
  65.           // initializes the selectedDefault
  66.           window.attachEvent("onload",initializeDefaultSelection);
  67.         }catch(ex){}
  68.       </script>
  69.     </form>
  70.   </body>
  71. </html>
May 8 '09 #6

Frinavale
Expert Mod 5K+
P: 9,731
This solution is still not going to help me with my problem though....

It's going to be really ugly if I have to store the default selected radio buttons in an array (more like create a hashtable and store them there)....

Is there a way to add the default selected radio button as a property to the radio buttons? Instead of having to store it in a variable?
May 8 '09 #7

Post your reply

Sign in to post your reply or Sign up for a free account.