Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with radio button validation

    Hi everyone. I'm getting into javascript coding and i'm stumped with some problem about radio buttons. What I would like is to have a general function where I can pass in any group of radio buttons and have it return the textual value of the radio button selected. First, here is my code so far.

    Code:
    function Get_Radio_Selection(options)
    {
       var choice = "";
    
       for (var index = 0; index <= options.length; index++)
          if (options[index].checked == true)
             choice = options[index].value;
    
       return choice;
    }
    Now here's a sample form:

    Code:
    <form name="form1">
       <input type="radio" name="food" value="Banana">Banana
       <input type="radio" name="food" value="Mango">Mango
       <input type="radio" name="food" value="Orange">Orange
       <input type="radio" name="food" value="Oatmeal">Oatmeal
    
       <input type="button" name="blah" value="Get Selection"
              onclick="Get_Radio_Selection(document.form1.food);">
    </form>
    My question is, when i run this function and pass it in the group of radio buttons by means of the onclick event handler, firefox 3.6.22 reports in the error console on line 22 that "options[index] is undefined". It seems that if i use the variable "index" more than one time it reports this error but if I take out the assignment to variable "choice" that it works just fine. I rewrote the function using a separate variable and this time it works perfectly:

    Code:
    function Get_Radio_Selection(options)
    {
       var choice = "";
       var index;
    
       for (var i = 0; i < options.length; i++)
        {
          if (options[i].checked == true)
           {
             index = i;
    
             choice = options[index].value;
           }
        }
    
       return choice;
    }
    Notice the indexing variables in the "if" statement and the assignment to "choice" are different. Does anyone have any suggestions on why this happens? Thanks.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,171
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    I dunno why FF gives you the error. Looks like it is a scope of variable issue.
    Bet it would work if you did
    Code:
    function Get_Radio_Selection(options)
    {
       var choice = "";
    
       for (var index = 0; index <= options.length; index++)
       {
          if (options[index].checked == true)
          {
             choice = options[index].value;
          }
       }
       return choice;
    }
    But why make the code so complex in the first place?
    Code:
    function Get_Radio_Selection(options)
    {
       for (var index = 0; index <= options.length; index++)
       {
          if (options[index].checked) return options[index].value;
       }
       return null;
    }
    As a minor precaution: That code will give an error if you ever have a group of radio buttons that actually has only one button in it!

    Easy fix:
    Code:
    function Get_Radio_Selection(options)
    {
       // protect against single radio button
       if ( options.length == null ) return options.checked ? options.value : null;
    
       for (var index = 0; index <= options.length; index++)
       {
          if (options[index].checked) return options[index].value;
       }
       return null;
    }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •