Dynamical radio button group validation

Question

sample javascript :

<script type="text/javascript">
function validateForm() {
    var radiobutton = document.getElementsByName("co[]");
    for (var i = 0; i < radiobutton.length; i++) {
        if (radiobutton[i].checked) {
            return true;
        }
    }

    alert("At least one radio button has not been selected");
    return false;
}

Sample php :

<form method="post" action="result.php" onSubmit="return validateForm();">
<?php   
    $_SESSION['two']=$_POST;

    $query1 = mysql_query('SELECT * FROM option WHERE code IN("'.implode('","',$_POST['co']).'")'); 
    while($data1 = mysql_fetch_assoc($query1))
    {               
        echo $data1['name'];                                    
?>          
    <table>
        <tr>
            <td>Detail</td>
            <td>Select</td>
        </tr>
    <?php                       
        $query = mysql_query('SELECT * FROM detailoption WHERE code="'.$data1['code'].'"');
        while($data = mysql_fetch_assoc($query))
        {           
            echo "<tr>";
            echo "<td>".$data['detail']."</td>";
            echo "<td><input type='radio' value='".$data['detail']."' name='co[".$data['code']."]' /></td>";
            echo "</tr>";               
        }                       
    ?>
    </table>
<?php
    }
?>              
<input type="submit" name="submit" value="Submit" />

when I select the radio button and submit, the system displays an error message.
when I don't select the radio button and submit, the system also displays an error message.

Can anyone help me out?

Answer 1

Your line var radiobutton = document.getElementsByName("co[]"); always return empty array because you don't have any input with that name.

You should store your code information in the value attributes of the input, and if you want to retrieve the detail field in the result, you should store the detailoption_id in the value attributes, because all your rows in the table have the same code, but may be not the same detail.

$query = mysql_query('SELECT * FROM detailoption WHERE code="'.$data1['code'].'"');
        while($data = mysql_fetch_assoc($query))
        {           
            echo "<tr>";
            echo "<td>".$data['detail']."</td>";
            echo "<td><input type='radio' value='".$data['code']."' name='co' /></td>";
            echo "</tr>";               
        } 

and then get your inputs list from the new name given

var radiobutton = document.getElementsByName("co");

Answer 2

first give a name to form -like myform and try this. i hope it will be used for you.

function validateForm()    {

len = document.myform.co.length

for (i = 0; i <len; i++)
{
   if (document.myform.co[i].checked) 
   {
     return true;
   }

   alert("At least one radio button has not been selected");
   return false;
}