Prevent RadioButton Selection

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Frinavale
    Recognized Expert Expert
    • Oct 2006
    • 9749
    #1

    Prevent RadioButton Selection

    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)
    Code:
    <html>
  <head>
    <script type="text/javascript">
    function doClick(e){
      if(confirm("are you sure?")==false){
        e.preventDefault();
        e.stopPropagation();
        return false;
      }
      return true;
    }
    </script>
  </head>
  <body>
    <form>
      <input type="radio" name="radio1" onclick="doClick(event);" />x
      <input type="radio" name="radio1" onclick="doClick(event);" />y
      <input type="radio" name="radio1" onclick="doClick(event);" />z
    </form>
  </body>
</html>
    Tags: None
    • Frinavale
      Recognized Expert Expert
      • Oct 2006
      • 9749
      #2
      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....

      Code:
      <html>
  <head>
    <script type="text/javascript">
    var radioIsSelected;
    function doClick(e){
      if(confirm("are you sure?")==false){
        if(radioIsSelected == false){
          var radio1 = document.getElementsByName('radio1');
          for(var i=0; i<radio1.length; i++)
          { 
            radio1[i].checked = false;
          }
        }
        e.preventDefault();
        e.stopPropagation();
        return false;
      }else{
        radioIsSelected = true;
      }
      return true;
    }
    function checkChecked(){
      var radio1 = document.getElementsByName('radio1');
      radioIsSelected = false;
      for(var i=0; i<radio1.length && radioIsSelected==false ; i++)
      { 
        if(radio1[i].checked){
          radioIsSelected = true;
        }
      }
    }
    </script>
  </head>
  <body onload="checkChecked();">
    <form>
      <input type="radio" name="radio1" onclick="doClick(event);" />x
      <input type="radio" name="radio1" onclick="doClick(event);" />y
      <input type="radio" name="radio1" onclick="doClick(event);" />z
    </form>
  </body>
</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

        Comment

        • Frinavale
          Recognized Expert Expert
          • Oct 2006
          • 9749
          #3
          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:
          Code:
          <html>
  <head>
    <script type="text/javascript">
    function doClick(e){
      if(confirm("are you sure?")==false){
        e.target.checked = e.target.defaultChecked;
        e.preventDefault();
        e.stopPropagation();
        return false;
      }
      return true;
    }
    </script>
  </head>
  <body>
    <form>
      <input type="radio" name="radio1" id="xRadio" onclick="doClick(event);" />x
      <input type="radio" name="radio1" id="yRadio" onclick="doClick(event);" />y
      <input type="radio" name="radio1" id="zRadio" onclick="doClick(event);" />z
    </form>
  </body>
</html>

            Comment

            • acoder
              Recognized Expert MVP
              • Nov 2006
              • 16032
              #4
              For IE, use:
              Code:
              e.returnValue = false;
e.cancelBubble = true;
              Test for support of the DOM standard methods and, if not present, try these statements for IE.

                Comment

                • Frinavale
                  Recognized Expert Expert
                  • Oct 2006
                  • 9749
                  #5
                  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:
                  Code:
                  <html>
  <head>
    <script type="text/JavaScript">
      function doClick(e){
        if(confirm("are you sure?")==false){
          try{
            e.target.checked = e.target.defaultChecked;
            e.preventDefault();
            e.stopPropagation();
            return false;
          }catch(ex){
            e.returnValue = false;
            e.cancelBubble = true;
            return true;
          }
        }
        return true;
      }
    </script> 
  </head>
  <body>
    <input type="radio" name="radio1" id="xRadio" onclick="doClick(event);" />x
    <input type="radio" name="radio1" id="yRadio" onclick="doClick(event);" />y
    <input type="radio" name="radio1" id="zRadio" onclick="doClick(event);" />z
  </body>
</htm>
                  Thanks acoder :)

                    Comment

                    • Frinavale
                      Recognized Expert Expert
                      • Oct 2006
                      • 9749
                      #6
                      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.

                      Code:
                      <html>
  <head>

    <script type="text/javascript">
    var selectedDefault; // used to remember the radio button selected 
    function doClick(e){
      if(confirm("are you sure?")==false){
        try{
          // FireFox case.
          // Setting the target.checked property to the defaultChecked will
         // deselect the current radio button and select the radio button that
         // was previously selected.
          e.target.checked = e.target.defaultChecked;
          e.preventDefault();
          e.stopPropagation();
        }catch(ex){
          // Internet Explorer case.
          // Setting the target.checked property to the defaultChecked does not
         // deselect the current radio button and select the radio button that
         // was previously selected.

         // The following selects the radio button that was previously selected
          if(selectedDefault){
            selectedDefault.checked = true;
          }
          //Deselecting the radio button that was the event's target
          e.srcElement.checked = false;

          //Preventing the event from continuing
          e.returnValue = false;
          e.cancelBubble = true;
        }
        return false;
      }else{
        if(e.srcElement){
          selectedDefault = e.srcElement;        
        }
      }

      return true;
    }


   // This function is called to set the initial value of the selectedDefault 
    function initializeDefaultSelection(){
      var radioButtons = document.getElementsByName('radio1');
      for(var i=0; i<radioButtons.length; i++)
      { 
        if(radioButtons[i].checked){
         selectedDefault = radioButtons[i];
        }
      }
    }
    </script>
  </head>
  <body>
    <form>
      <input type="radio" name="radio1" id="xRadio" onclick="doClick(event);" />x
      <input type="radio" checked name="radio1" id="yRadio" onclick="doClick(event);" />y
      <input type="radio" name="radio1" id="zRadio" onclick="doClick(event);"/>z

      <script type="text/javascript"> 
        try{
          // When the window is loaded, this calls the method that
          // initializes the selectedDefault
          window.attachEvent("onload",initializeDefaultSelection);
        }catch(ex){}
      </script>
    </form>
  </body>
</html>

                        Comment

                        • Frinavale
                          Recognized Expert Expert
                          • Oct 2006
                          • 9749
                          #7
                          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?

                            Comment

                            Previous template Next
                            Working...