#1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2003
    Location
    SA, Centurion
    Posts
    355
    Rep Power
    12

    Radio button group validation


    Hi,

    I have multiple radio button groups on a html page. I need to validate that every radio button group is selected, if not alert a message before sumitting the form.
    here is some of my html
    PHP Code:
    <table>
                <tr>
                    <td width="50px"> <input type="radio" id="q1" name="q1" value="1" >/> 1.</td>
                    <td width="50px"> <input type="radio" id="q1" name="q1" value="2" /> 2.</td>
                    <td width="50px"> <input type="radio" id="q1" name="q1" value="3" /> 3.</td>
                    <td width="50px"> <input type="radio" id="q1" name="q1" value="4" /> 4.</td>
                    <td width="50px"> <input type="radio" id="q1" name="q1" value="5" <?php  if($rs['rRating1'] == 5){ echo "checked";}?>/> 5.</td>
                    <td width="50px"> <input type="radio" id="q1" name="q1" value="6"/> 6.</td>
                </tr>
            </table>
            </td>
        </tr>
        <tr>
            <td>Packaging appearance:</td>
            <td>
            <table>
                <tr>
                    <td width="50px"> <input type="radio" id="q2" name="q2" value="1" / > 1.</td>
                    <td width="50px"> <input type="radio" id="q2" name="q2" value="2" / > 2.</td>
                    <td width="50px"> <input type="radio" id="q2" name="q2" value="3" / > 3.</td>
                    <td width="50px"> <input type="radio" id="q2" name="q2" value="4" / > 4.</td>
                    <td width="50px"> <input type="radio" id="q2" name="q2" value="5" / > 5.</td>
                    <td width="50px"> <input type="radio" id="q2" name="q2" value="6" /  6.</td>
                </tr>
            </table>
            </td>
        </tr>
        <tr>
            <td>Seal:</td>
            <td>
            <table>
                <tr>
                    <td width="50px"> <input type="radio" id="q3" name="q3" value="1" / > 1.</td>
                    <td width="50px"> <input type="radio" id="q3" name="q3" value="2" /> 2.</td>
                    <td width="50px"> <input type="radio" id="q3" name="q3" value="3" / > 3.</td>
                    <td width="50px"> <input type="radio" id="q3" name="q3" value="4" / > 4.</td>
                    <td width="50px"> <input type="radio" id="q3" name="q3" value="5" / > 5.</td>
                    <td width="50px"> <input type="radio" id="q3" name="q3" value="6" / > 6.</td>
                </tr>
            </table>
            </td>
        </tr>
        <tr>
            <td>Patient response (if related):</td>
             <td>
            <table>
                <tr>
                    <td width="50px"> <input type="radio" id="q4" name="q4" value="1" /> 1.</td>
                    <td width="50px"> <input type="radio" id="q4" name="q4" value="2" /> 2.</td>
                    <td width="50px"> <input type="radio" id="q4" name="q4" value="3" /> 3.</td>
                    <td width="50px"> <input type="radio" id="q4" name="q4" value="4"/> 4.</td>
                    <td width="50px"> <input type="radio" id="q4" name="q4" value="5" /> 5.</td>
                    <td width="50px"> <input type="radio" id="q4" name="q4" value="6" /> 6.</td>
                </tr>
            </table>
            </td>
        </tr>
    The javascrip code I'm trying but not able to get it working:
    PHP Code:
    function isRadioChecked(){

    var 
    buttons document.getElementsByTagName("input");

    for (var 
    0buttons.lengthi++) {
        var 
    button buttons[i];
        var 
    id button.getAttribute("id");
        var 
    type button.getAttribute("type");
        var 
    value button.getAttribute("value");
        var 
    checked button.getAttribute("checked");

        if (
    type === "radio" ) {
        var 
    don document.getElementById(id);
        
             for(var 
    it=0;it<don.length;it++){
                if(
    don[it].checked)checkme 1;
                
                if(
    checkme == 0){
                 
    alert("select a radio button");
                
                }    
            
            }
         }
        
    }



    Any other ideas ?
    :P
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    While the names of all radio buttons in a group of them must be the same, the IDs, if present, must be unique. document.getElementById() either returns a single element reference or null. Use document.getElementsByName(), like this:
    Code:
    var don = document.getElementsByName(button.getAttribute("name"));
    It looks like you forgot to declare and initialize "checkme". You need to do so before the inner loop, otherwise the function would only work for the first radio button group. By the way, you don't need to be creating the "id" or "value" variables.

    Please use the label element to make your HTML forms accessible
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2003
    Location
    SA, Centurion
    Posts
    355
    Rep Power
    12

    Smile


    Originally Posted by Kravvitz
    While the names of all radio buttons in a group of them must be the same, the IDs, if present, must be unique. document.getElementById() either returns a single element reference or null. Use document.getElementsByName(), like this:
    Code:
    var don = document.getElementsByName(button.getAttribute("name"));
    It looks like you forgot to declare and initialize "checkme". You need to do so before the inner loop, otherwise the function would only work for the first radio button group. By the way, you don't need to be creating the "id" or "value" variables.

    Please use the label element to make your HTML forms accessible
    Thanks, got it working on your advice. Much appreciated !!!
    :P

IMN logo majestic logo threadwatch logo seochat tools logo