473,226 Members | 1,579 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,226 software developers and data experts.

Prevent RadioButton Selection

Frinavale
9,735 Expert Mod 8TB
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
6 14330
Frinavale
9,735 Expert Mod 8TB
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
9,735 Expert Mod 8TB
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
16,027 Expert Mod 8TB
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
9,735 Expert Mod 8TB
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
9,735 Expert Mod 8TB
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
9,735 Expert Mod 8TB
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

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

Similar topics

0
by: back2grid | last post by:
I'm basically looking for highlighting a datagrid row on selection a radio button control. the problem i'm having is that the event sender(radio btn) i'm getting is functioning as a checkbox. my...
2
by: Scott Natwick | last post by:
I am having trouble validating that a selection has been made from a RadioButton. I created a script to trigger from a CustomValidator, however, it only works when I run the app locally, from...
0
by: Michel Lapointe | last post by:
Hello, I would like to know if there is an event for the Datagridview control that is trigger before the selection change and is cancelable. I'm currently using the SelectionChanged event...
4
by: bkasmai | last post by:
On editing textboxes on a webform, when a user tab to a textbox, the text is highlighted or selected. Any accidental key press will remove the original text. This has proved a problem for the...
6
by: Fnord Nase | last post by:
Hi. We're using the dblclick event in some parts of a web app interface, which works okay, but when a user double clicks on a text element, the browser selects some text before executing the...
3
by: =?Utf-8?B?TWlrZQ==?= | last post by:
Hi Guys, I have a gridview and the first column is a template that generate a radiobuttons in the gridvew. and I would like that user will be able to select one option from the list of the...
1
by: vinnie | last post by:
I placed the following code into my page, but i get an error message, why? The code is: if (this.RadioButtonContatto.Checked == "YES") The error message is: CS0117:...
3
by: Vinnie | last post by:
I placed the following code into my page, but i get an error message, why? The code is: if (this.RadioButtonContatto.Checked == "YES") The error message is: CS0117:...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.