• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 279
  • Last Modified:

How to validate that one of the radio buttons in a group has been selected

Hi, I have 28 tables with 2 groups of 4 radio buttons in each. I only show one table at a time. I need a way to validate the user selects 1 radio button from each group.
for example... my first table looks like this
                                                     most       least
RadioGroup1  Enthusiastic       O            O
RadioGroup2  Daring                 O            O
RadioGroup1  Diplomatic          O            O
RadioGroup2  Satisfied              O            O
next button  <------------ once they click here they go to the next question.

I have the JavaScript already that only allows the user to select one from each column and row. For instance you can only be "most" daring and "least" satisfied but you cannot be most daring and least daring. Now what I need is code to validate that 1 from each group is selected before they can move on to the next question. I attached 2 tables the rest are exactly the same with different questions but the naming scheme is the same. I also put the JavaScript that only allows you select one from each column that aren't mutually exclusive to one another and also the JavaScript to hide each table. Any help would be great.
<div style="width: 900px; height: 450px; margin: auto;">

<table style="text-align: left; " border="0" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td>
      <div class="question_box" id="table1" style="display:;">
	<table cellspacing="0" border="0" cellpadding="0" align="center" style="width: 600px; height: 423px;">
  <tbody>
    <tr>
      <td width="54%"><font color="blue">1</font></td>
      <td width="24%" class="c">Most</td>
      <td width="22%" class="c">Least</td>
    </tr>
    <tr>
      <td>Enthusiastic</td>
      <td align="center"><input name="RadioGroup1" value="most_enthusiastic" id="rg1_1" type="radio" onclick="doSome(this.id)"></td>
      <td align="center"><input name="RadioGroup2" value="least_enthusiastic" id="rg1_2" type="radio" onclick="doSome(this.id)"></td>
    </tr>
    <tr>
      <td>Daring</td>
      <td align="center"><input name="RadioGroup1" value="most_daring" id="rg2_1" type="radio" onclick="doSome(this.id)"></td>
      <td align="center"><input name="RadioGroup2" value="least_daring" id="rg2_2" type="radio" onclick="doSome(this.id)"></td>
    </tr>
    <tr>
      <td>Diplomatic</td>
      <td align="center"><input name="RadioGroup1" value="most_diplomatic" id="rg3_1" type="radio" onclick="doSome(this.id)"></td>
      <td align="center"><input name="RadioGroup2" value="least_diplomatic" id="rg3_2" type="radio" onclick="doSome(this.id)"></td>
    </tr>
    <tr>
      <td>Satisfied</td>
      <td align="center"><input name="RadioGroup1" value="most_satisfied" id="rg4_1" type="radio" onclick="doSome(this.id)"></td>
      <td align="center"><input name="RadioGroup2" value="least_satisfied" id="rg4_2" type="radio" onclick="doSome(this.id)"></td>
    </tr>
    <tr>
      <TD><input type="submit" name="next" id="next" value="Next Question >>" style="font-family:Arial, Helvetica, sans-serif; font-size:14px;"  onclick="enablenexttable(2);"/></TD>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

</div>
      </td>
      <td>
      <div class="question_box" id="table2" style="display: none;">
	<table style="width: 600px; height: 423px;" cellpadding="0" cellspacing="0">
        <tbody>
          <tr>
            <td width="54%"><font color="blue">8</font></td>
            <td class="c" width="24%">Most</td>
            <td class="c" width="22%">Least</td>
          </tr>
          <tr>
            <td>Poised</td>
            <td align="center"><input name="RadioGroup3" value="most_poised" id="rg5_1" type="radio" onclick="doSome(this.id)"></td>
            <td align="center"><input name="RadioGroup4" value="least_poised" id="rg5_2" type="radio" onclick="doSome(this.id)"></td>
          </tr>
          <tr>
            <td>Observant</td>
            <td align="center"><input name="RadioGroup3" value="most_observant" id="rg6_1" type="radio" onclick="doSome(this.id)"></td>
            <td align="center"><input name="RadioGroup4" value="least_observant" id="rg6_2" type="radio" onclick="doSome(this.id)"></td>
          </tr>
          <tr>
            <td>Modest</td>
            <td align="center"><input name="RadioGroup3" value="most_modest" id="rg7_1" type="radio" onclick="doSome(this.id)"></td>
            <td align="center"><input name="RadioGroup4" value="least_modest" id="rg7_2" type="radio" onclick="doSome(this.id)"></td>
          </tr>
          <tr>
            <td>Impatient</td>
            <td align="center"><input name="RadioGroup3" value="most_impatient" id="rg8_1" type="radio" onclick="doSome(this.id)"></td>
            <td align="center"><input name="RadioGroup4" value="least_impatient" id="rg8_2" type="radio" onclick="doSome(this.id)"></td>
          </tr>
          <tr>
          <TD><input type="submit" name="next" id="next" value="Next Question >>" style="font-family:Arial, Helvetica, sans-serif; font-size:14px;"  onclick="enablenexttable(3);"/></TD>
          <td></td>
          <td></td>
        </tr>
        </tbody>
      </table>
      </td>

<!this script hides one table and unhides the next-->
<SCRIPT type="text/javascript">
var counter = 0;
function enablenexttable(nextIndex){
//function getElements(){
//        var x=document.getElementsByName("RadioGroup1").value = ""
  //      alert(x.length + " elements!")
    
  //  alert(document.getElementsByName(RadioGroup1));

    document.getElementById('table' + (nextIndex-1)).style.display="none";
    document.getElementById('table' + nextIndex).style.display="";
    counter++;
    }
</script>

<!this script only allows a user to click 1 from each column that aren't mutually exclusive to one another. -->
<script type="text/javascript">

 function doSome(thisId)
 {
    //alert(thisId)
    thisRadio = document.getElementById(thisId)
    oppId = ""
    if(thisId.substring(thisId.length-1) == "1")
    {
        oppId = thisId.substring(0, thisId.length-1) + "2"
    }
    else
        oppId = thisId.substring(0, thisId.length-1) + "1"
    //alert(oppId)
    oppRadio = document.getElementById(oppId)
    oppRadio.checked = false
 }

</script>

Open in new window

0
Neil2526
Asked:
Neil2526
  • 5
  • 5
1 Solution
 
jello024Commented:
If I understand correctly, I want to make sure somthing is selected from a radio group before moving on.  The below funtion takes a radio group name and returns a true/false.

function bCheckRadio(sGroupName)
{
   var oArray = document.getElementsByName(sGroupName);
   for(var i = 0; i < oArray.length; i++)
   {
      if(oArray[i].checked){ return true; }
   }
   return false;
}

Open in new window

0
 
leakim971PluritechnicianCommented:
Hello Neil2526,

You may disable the button by default and enable it when a radio button is selected :

<input type="submit" name="next" id="next" value="Next Question" disabled="disabled" />

And modify the function doSome :


function doSome(thisId) {
    //alert(thisId)

    // Enable the "Next Question Button"
    document.getElementById(next).disabled = false;

    thisRadio = document.getElementById(thisId)
    ........

Open in new window

0
 
Neil2526Author Commented:
Well I like both ideas however they have to select 1 from each group before they can go on. I do like the disable feature leakim971. Jello024 I am not sure I am following your example.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
jello024Commented:
The function I posted returns a true value if one of the radios is checked for a specific group. It returns false if none are checked for that group.  You can use this how ever you want, my thoughts where this function would be used when the user is moving to the next question.

user clicks button to go to next question >> 
 if(bCheckRadio('sGroupName'))
{
   //show next question
}
else{ alert('Answer this question first!'); }
0
 
Neil2526Author Commented:
So jello024, if I am understanding you right I create the function like this.
function bCheckRadio(sGroupName)
{
   var oArray = document.getElementsByName(sGroupName);
   for(var i = 0; i < oArray.length; i++)
   {
      if(oArray[i].checked){ return true; }
   }
   return false;
}

Then for each radio button pass the group name like this:
<td align="center"><input name="RadioGroup1" value="most_enthusiastic" id="rg1_1" type="radio" onclick="doSome(this.id); bCheckRadio(RadioGroup1)"></td>
<td align="center"><input name="RadioGroup2" value="least_enthusiastic" id="rg1_2" type="radio" onclick="doSome(this.id); bCheckRadio(RadioGroup2)"></td>

and inside my enablenexttable() add
 if(bCheckRadio('sGroupName'))
{
   //show next question
}
else{ alert('Answer this question first!'); }

Am I following you correctly
0
 
Neil2526Author Commented:
So I made the changes to the best of my understandings jello as you can see below. But all it does is alert me alert('Answer one from each column first');  


I added the function to all my radio buttons like so

<td align="center"><input name="RadioGroup1" value="most_enthusiastic" id="rg1_1" type="radio" onclick="doSome(this.id); bCheckRadio(this.name);"></td>

then made the changes and additions to the javascript

<script type="text/javascript">

function bCheckRadio(sGroupName)
{
   var oArray = document.getElementsByName(sGroupName);
   for(var i = 0; i < oArray.length; i++)
   {
      if(oArray[i].checked){ return true; }
   }
   return false;
}
</script>

<SCRIPT type="text/javascript">
var counter = 0;
function enablenexttable(nextIndex){

 if (bCheckRadio('sGroupName'))
{
    document.getElementById('table' + (nextIndex-1)).style.display="none";
    document.getElementById('table' + nextIndex).style.display="";
    counter++;
}
else{
     alert('Answer one from each column first'); 
    }
}
</script>

<script type="text/javascript">

 function doSome(thisId)
 {
    //alert(thisId)
    thisRadio = document.getElementById(thisId)
    oppId = ""
    if(thisId.substring(thisId.length-1) == "1")
    {
        oppId = thisId.substring(0, thisId.length-1) + "2"
    }
    else
        oppId = thisId.substring(0, thisId.length-1) + "1"
    //alert(oppId)
    oppRadio = document.getElementById(oppId)
    oppRadio.checked = false
 }
</script>

Open in new window

0
 
jello024Commented:
you don't need to call bCheckRadio in the onclick event for the radio buttons.
In the enablenexttble function bCheckRadio is being used correctly, but you are passing a string with a value of sGroupName instead of the group name of the currentley visible radios.
0
 
Neil2526Author Commented:
Ok I apologize for not fully understanding but attached is the code that I have and it works however only for RadioGroup1 and RadioGroup2
For each table I have 2 radio groups so creating 50 variables isn't what I am looking for. So this is my last response, if you can help great, if your tired of helping me, I understand and can accept your previous answers. So the last thing is do I have the code correct and is there a way to simplify if so it looks at the current 2 radio groups that are being shown.
function bCheckRadio(sGroupName)
{
  var first = false;
  var second = false;

   var oArray = document.getElementsByName('RadioGroup1');      <----- I assume this is what you meant that I have to pass in the radio group name.
   var uArray = document.getElementsByName('RadioGroup2');      
   for(var i = 0; i < oArray.length; i++)
   {
      if(oArray[i].checked){ first = true; }
      if(uArray[i].checked){ second = true; }
   }

   return (first && second);
}
<script type="text/javascript">

function bCheckRadio(sGroupName)
{
  var first = false;
  var second = false;

   var oArray = document.getElementsByName('RadioGroup1');
   var uArray = document.getElementsByName('RadioGroup2');
   for(var i = 0; i < oArray.length; i++)
   {
      if(oArray[i].checked){ first = true; }
      if(uArray[i].checked){ second = true; }
   }

   return (first && second);
}
</script>

<SCRIPT type="text/javascript">
var counter = 0;
function enablenexttable(nextIndex){

 if (bCheckRadio('sGroupName'))
{
    document.getElementById('table' + (nextIndex-1)).style.display="none";
    document.getElementById('table' + nextIndex).style.display="";
    counter++;
}
else{
     alert('Answer one from each column first'); 
    }
}
</script>

<script type="text/javascript">

 function doSome(thisId)
 {
    //alert(thisId)
    thisRadio = document.getElementById(thisId)
    oppId = ""
    if(thisId.substring(thisId.length-1) == "1")
    {
        oppId = thisId.substring(0, thisId.length-1) + "2"
    }
    else
        oppId = thisId.substring(0, thisId.length-1) + "1"
    //alert(oppId)
    oppRadio = document.getElementById(oppId)
    oppRadio.checked = false
 }
</script>

Open in new window

0
 
jello024Commented:
I did some code based on your html layout.  It cycles through divs and picks out the one where className = "question_box" and display != none. It then looks at the table in that div, then the first two radio buttons for the names.  If you add more question boxes, as long as they are the same format, you won't have to change the code.
function bCheckRadio(sGroupName) 
{ 
  var first = false; 
  var second = false; 
 //>>>> NEW >>>>
   var sName1 = "";
   var sName2 = "";   
   var oA = document.getElementsByTagName("div");//Array of divs
   
   for(var i = 0; i < oA.length; i++)//cycle through div array
   {
      if(oA[i].className == "question_box" && oA[i].style.display != "none")//if the div class = "question_box" and IS displayed
      {       
         sName1 = oA[i].getElementsByTagName("table")[0].rows[1].cells[1].childNodes[0].name;//table in div, 2nd row, 2nd column, radio name
         sName2 = oA[i].getElementsByTagName("table")[0].rows[1].cells[2].childNodes[0].name;//table in div, 2nd row, 3rd column, radio name
      }
   }
 //<<<< NEW <<<<
   var oArray = document.getElementsByName(sName1);//new 
   var uArray = document.getElementsByName(sName2);//new
   for(var i = 0; i < oArray.length; i++) 
   { 
      if(oArray[i].checked){ first = true; } 
      if(uArray[i].checked){ second = true; } 
   } 
 
   return (first && second); 
} 

Open in new window

0
 
jello024Commented:
I forgot to add a break.
After line 15, in the if statement, add:
break;

so it kicks out of the for loop when it finds the div.
0
 
Neil2526Author Commented:
Wow that's awesome. Thank you so much, I have been racking my brain on this for hours. Your solution worked perfectly.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now