Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

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

Posted on 2009-12-31
11
Medium Priority
?
265 Views
Last Modified: 2012-05-08
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
Comment
Question by:Neil2526
  • 5
  • 5
11 Comments
 
LVL 6

Expert Comment

by:jello024
ID: 26154733
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
 
LVL 83

Expert Comment

by:leakim971
ID: 26154881
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
 

Author Comment

by:Neil2526
ID: 26154999
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 6

Expert Comment

by:jello024
ID: 26155033
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
 

Author Comment

by:Neil2526
ID: 26155176
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
 

Author Comment

by:Neil2526
ID: 26155700
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
 
LVL 6

Expert Comment

by:jello024
ID: 26172529
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
 

Author Comment

by:Neil2526
ID: 26174864
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
 
LVL 6

Accepted Solution

by:
jello024 earned 2000 total points
ID: 26175883
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
 
LVL 6

Expert Comment

by:jello024
ID: 26175903
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
 

Author Closing Comment

by:Neil2526
ID: 31671627
Wow that's awesome. Thank you so much, I have been racking my brain on this for hours. Your solution worked perfectly.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question