SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast inderpal.singh's Avatar
    Join Date
    Jul 2006
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Radio button validation

    Hi All,

    I have a set of radio buttons and have a validation in javascript which checks at least one of the radio button is checked.
    Code:
    <script language="javascript">
    function valbutton(thisform) {
    // place any other field validations that you require here
    // validate myradiobuttons
    myOption = -1;
    for (i=thisform.myradiobutton.length-1; i > -1; i--) {
    if (thisform.myradiobutton[i].checked) {
    myOption = i;
    }
    }
    if (myOption == -1) {
    alert("You must select a radio button");
    return false;
    }
    
    alert("You selected button number " + myOption
    + " which has a value of "
    + thisform.myradiobutton[myOption].value);
    
    // place any other field validations that you require here
    thisform.submit(); // this line submits the form after validation
    }
    
    </script>
    Code:
    <form name="myform">
    <input type="radio" value="1st value" name="myradiobutton" />1st<br />
    <input type="radio" value="2nd value" name="myradiobutton" />2nd<br />
    <input type="radio" value="3rd value" name="myradiobutton" />3rd<br />&nbsp;<br />
    <input type="submit" name="submitit" onclick="valbutton(myform);return false;" value="Validate" />
    <input type="reset" name="reset" value="Clear" />
    </form>
    This works fine.

    But If my form has only one radion button then this code doesn't work. Like this form has only one radio button in form

    Code:
    <form name="myform">
    <input type="radio" value="1st value" name="myradiobutton" />1st<br />
    <input type="submit" name="submitit" onclick="valbutton(myform);return false;" value="Validate" />
    <input type="reset" name="reset" value="Clear" />
    </form>
    Could anyone provide me solution for this? Any help would be highly appreciated. Thanks in advance!!

    Best Regards,
    Inderpal Singh

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thisform.myradiobutton.length

    will only be valid if there is more than 1 button
    Code:
    myOption = -1;
    
    if( thisform.myradiobutton.length ) {
    	for (i=thisform.myradiobutton.length-1; i > -1; i--) {
    		if (thisform.myradiobutton[i].checked) {
    			myOption = i;
    		}
    	}
    } else if( thisform.myradiobutton.checked ) {
    	myOption = 0;
    }
    
    
    if (myOption == -1) {
    	alert("You must select a radio button");
    	return false;
    }

  3. #3
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by inderpal.singh
    Hi All,

    I have a set of radio buttons and have a validation in javascript which checks at least one of the radio button is checked.
    Code:
    for (i=thisform.myradiobutton.length-1; i > -1; i--)
    If there is only one radio button in a group, it is not stored as a collection, therefore the length property is undefined.
    From a usability perspective, a checkbox may be more intuitive than a single radio button.

  4. #4
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Logic Ali
    From a usability perspective, a checkbox may be more intuitive than a single radio button.
    Also, once checked, a radio button can be really difficult to uncheck.

  5. #5
    SitePoint Enthusiast inderpal.singh's Avatar
    Join Date
    Jul 2006
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all the reply. The problem is, rows are comimg from the database so it's quite possible that there is only one record at one point of time.

    I thought of using the checkbox but the problem is I want to select one checkbox at a time. Is it possible to select one checkbox at a time or somebody can provide me any refrence to that?

    Best Regards,
    Inderpal Singh

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The problem with only one radio button is that it doesn't create an array.

    Add a hidden field with the same name as the radio buttons to the end of your form. That will ensure that the radio buttons are always treated as an array even when there is only one of them.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It would be less of a kludge to branch the code depending on whether:
    document.forms[x].radio_name.length == undefined

    Preferably, however, logic at the server should present a single choice as a checkbox. Although it would be possible to write a JavaScript script to limit a group of checkboxes to having one selected, it would break on a client without JavaScript enabled.

  8. #8
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    If it is required that one option be selected then there is no need for either a radio button or a checkbox if there is only one option to choose from since that option MUST be the selected one since it is the only choice. It could therefore be done as a hidden field with no validation required.

    It all depends on how complicated you want to make the code in order to handle the situation where there is only one item that must be chosen.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    If it is required that one option be selected then there is no need for either a radio button or a checkbox if there is only one option to choose from since that option MUST be the selected one since it is the only choice. It could therefore be done as a hidden field with no validation required.

    It all depends on how complicated you want to make the code in order to handle the situation where there is only one item that must be chosen. The one extra HTML tag is a way to fix it without having to change anything else.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  10. #10
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by inderpal.singh
    Thanks for all the reply. The problem is, rows are comimg from the database so it's quite possible that there is only one record at one point of time.
    O.K. try reading your radio button group with this function, which handles single buttons.
    Code:
    /**Returns the 1-based index of the checked radio
    button in the specified group, or 0 if nothing is checked.**/
    
    function isRadioChecked( group )
    {
     if(group.length)
      for (var i=0; i<group.length && !group[i].checked; i++)
      ;
    
     return group.length ? ((i != group.length) ? i+1 : 0) 
                         : (group.checked ? 1 : 0);
    }


Bookmarks

Posting Permissions

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