I have a questionnaire form consisting of several items. Each item has two sets of radio buttons that asks two questions per item. For each item the person is asked to choose the “need” of the item (5 radio buttons) and the “priority” of the item (5 radio buttons). There are a number of things that I want to happen, some of which I have figured out already and some that I haven’t.
I want the radio button questions to be hidden until the name of the item is clicked on and then hidden again when clicked on a second time (this I figured out already).
When clicked on to reveal the questions, I want the container background color that contains the name of the item and questions to be changed (this I figured out already).
If both questions are answered, I want the color of the item text to be changed. This I have not figured out and would like some help with.
Below is just the Javascript function and one of the items that is in the form.
Javascript
<script type="text/javascript" language="javascript">
function chkSelect(Qnum) <pre lang="HTML"></pre>
{
var need = document.getElementsByName('NeedRank_' + Qnum);
var priority = document.getElementsByName('PriorityRank_' + Qnum);
var outer = document.getElementById("outerText");
var inner = document.getElementById("innerText");
var divblk = document.getElementById("divBlock");
if(inner.style.display == "none")
{
outer.style.color = "#2BA5AB";
inner.style.display = "block";
divblk.style.backgroundColor = "#F0FFF0";
}
else
{
outer.style.color = "black";
inner.style.display = "none";
divblk.style.backgroundColor = "transparent";
for (var i = 0, len = need.length; i < len; i++)
{
if (need[i].checked)
{
var n = "t";
}
else
{
var n = "f";
}
}
for (var i = 0, len = priority.length; i < len; i++)
{
if (priority[i].checked)
{
var p = "t";
}
else
{
var p = "f";
}
}
if (n == "t" && p == "t")
{
outer.style.color = "Blue";
}
else
{
outer.style.color = "Black"
}
}
}
</script>
HTML of one Item:
<div id="divBlock" class="divBlocks">
<h5 id="outerText" onclick="chkSelect(1);">Common House</h5>
<div id="innerText" style="display: none">
<h6 class="spacer">Need:</h6>
<span class="spacer">Absolutely must have</span><input type="radio" name="NeedRank_1" id="need_1" value="need_1" style="width: 25px"/>
<span class="spacer">Kind of want , but OK if we don't have</span><input type="radio" name="NeedRank_1" id="need_2" value="need_2" style="width: 25px"/>
<span class="spacer">Neither here nor there</span><input type="radio" name="NeedRank_1" id="need_3" value="need_3" style="width: 25px"/>
<span class="spacer">Kind of don't want, but OK if we have</span><input type="radio" name="NeedRank_1" id="need_4" value="need_4" style="width: 25px"/>
<span class="spacer">Absolutely don't want</span><input type="radio" name="NeedRank_1" id="need_5" value="need_5" style="width: 25px"/>
<br/><br/>
<h6 class="spacer">Priority:</h6>
<span class="spacer">One of the first things to do</span><input type="radio" name="PriorityRank_1" id="Priority_1" value="Priority_1" style="width: 25px"/>
<span class="spacer">Within a year or two</span><input type="radio" name="PriorityRank_1" id="Priority_2" value="Priority_2" style="width: 25px"/>
<span class="spacer">Within the first ten years</span><input type="radio" name="PriorityRank_1" id="Priority_3" value="Priority_3" style="width: 25px"/>
<span class="spacer">Sometime in the future</span><input type="radio" name="PriorityRank_1" id="Priority_4" value="Priority_4" style="width: 25px"/>
<span class="spacer">Never</span><input type="radio" name="PriorityRank_1" id="Priority_5" value="Priority_5" style="width: 25px"/>
</div>
</div>
The program below will make all of the colour changes you are after.
<script type="text/javascript">
var n=false, p=false;
function chkSelect(Qnum)
{ var need = document.getElementsByName('NeedRank_' + Qnum);
var priority = document.getElementsByName('PriorityRank_' + Qnum);
var outerObj = document.getElementById("outerText");
var innerObj = document.getElementById("innerText");
var divblkObj = document.getElementById("divBlock");
var msgObj=document.getElementById("msg");
//
if(innerObj.style.display == "none")
{ outerObj.style.color = "#2BA5AB"; // cyan
innerObj.style.display = "block";
divblkObj.style.backgroundColor = "#F0FFF0"; //lt green
}
else
{ outerObj.style.color = "#000"; // black
innerObj.style.display = "none";
divblkObj.style.backgroundColor = "transparent";
var i;
for ( i = 0; i < need.length; i++)
{ if (need[i].checked){ n = true; } }
//
for ( i = 0; i < priority.length; i++)
{ if (priority[i].checked) { p = true; } }
//
if (n === p && n === true){ outerObj.style.color = "#00F"; } // blue
else { outerObj.style.color = "#000"; } // black
}
msgObj.innerHTML="need selected= "+n+"; priority selected= "+p+";";
}
</script>
You were on the right track in setting n and p to true or false, but you really only need to flag the change from the initial false state in each of the two sections and then check to see if both n and p are true at the end of the test. This is done in the script with if (n === p && n === true).
I have moved the style information out of your code to clean it up a bit. I have also added a temporary message so that you can see the changes to p and n for each click of the heading.
There is a working example of this program on JSFiddle HERE.
I did run into a problem when adding additional question blocks. Clicking on both questions of one question block will turn the heading text to blue on other question blocks when that question block is clicked regardless of any radio buttons being checked on that question block… I tried modifying the code to prevent this, but it is still doing it. maybe you can help:
Javascript:
<script type="text/javascript">
var n=false, p=false;
function chkSelect(Qnum)
{ var need = document.getElementsByName('NeedRank_' + Qnum);
var priority = document.getElementsByName('PriorityRank_' + Qnum);
var outerObj = document.getElementById("outerText_" + Qnum);
var innerObj = document.getElementById("innerText_" + Qnum);
var divblkObj = document.getElementById("divBlock_" + Qnum);
var msgObj=document.getElementById("msg");
//
if(innerObj.style.display == "none")
{ outerObj.style.color = "#2BA5AB"; // cyan
innerObj.style.display = "block";
divblkObj.style.backgroundColor = "#F0FFF0"; //lt green
}
else
{ outerObj.style.color = "#000"; // black
innerObj.style.display = "none";
divblkObj.style.backgroundColor = "transparent";
var i;
for ( i = 0; i < need.length; i++)
{ if (need[i].checked){ n = true; } }
//
for ( i = 0; i < priority.length; i++)
{ if (priority[i].checked) { p = true; } }
//
if (n === p && n === true){ outerObj.style.color = "#00F"; } // blue
else { outerObj.style.color = "#000"; } // black
}
msgObj.innerHTML="need selected= "+n+"; priority selected= "+p+";";
}
</script>
HTML of Question Blocks:
<form id="contact-form" action="script.php" method="post">
<div id="divBlock_1" class="divBlocks">
<h5 id="outerText_1" onclick="chkSelect(1);">Common House</h5>
<div id="innerText_1" style="display: none">
<h6 class="spacer">Need:</h6>
<span class="spacer">Absolutely must have</span><input type="radio" name="NeedRank_1" value="need_1" style="width: 25px"/>
<span class="spacer">Kind of want , but OK if we don't have</span><input type="radio" name="NeedRank_1" value="need_2" style="width: 25px"/>
<span class="spacer">Neither here nor there</span><input type="radio" name="NeedRank_1" value="need_3" style="width: 25px"/>
<span class="spacer">Kind of don't want, but OK if we have</span><input type="radio" name="NeedRank_1" value="need_4" style="width: 25px"/>
<span class="spacer">Absolutely don't want</span><input type="radio" name="NeedRank_1" value="need_5" style="width: 25px"/>
<br/><br/>
<h6 class="spacer">Priority:</h6>
<span class="spacer">One of the first things to do</span><input type="radio" name="PriorityRank_1" value="Priority_1" style="width: 25px"/>
<span class="spacer">Within a year or two</span><input type="radio" name="PriorityRank_1" value="Priority_2" style="width: 25px"/>
<span class="spacer">Within the first ten years</span><input type="radio" name="PriorityRank_1" value="Priority_3" style="width: 25px"/>
<span class="spacer">Sometime in the future</span><input type="radio" name="PriorityRank_1" value="Priority_4" style="width: 25px"/>
<span class="spacer">Never</span><input type="radio" name="PriorityRank_1" value="Priority_5" style="width: 25px"/>
</div>
</div>
<div id="divBlock_2" class="divBlocks_sub1">
<h5 id="outerText_2" onclick="chkSelect(2);">Kitchen</h5>
<div id="innerText_2" style="display: none">
<h6 class="spacer">Need:</h6>
<span class="spacer">Absolutely must have</span><input type="radio" name="NeedRank_2" value="need_1" style="width: 25px"/>
<span class="spacer">Kind of want , but OK if we don't have</span><input type="radio" name="NeedRank_2" value="need_2" style="width: 25px"/>
<span class="spacer">Neither here nor there</span><input type="radio" name="NeedRank_2" value="need_3" style="width: 25px"/>
<span class="spacer">Kind of don't want, but OK if we have</span><input type="radio" name="NeedRank_2" value="need_4" style="width: 25px"/>
<span class="spacer">Absolutely don't want</span><input type="radio" name="NeedRank_2" value="need_5" style="width: 25px"/>
<br/><br/>
<h6 class="spacer">Priority:</h6>
<span class="spacer">One of the first things to do</span><input type="radio" name="PriorityRank_2" value="Priority_1" style="width: 25px"/>
<span class="spacer">Within a year or two</span><input type="radio" name="PriorityRank_2" alue="Priority_2" style="width: 25px"/>
<span class="spacer">Within the first ten years</span><input type="radio" name="PriorityRank_2" value="Priority_3" style="width: 25px"/>
<span class="spacer">Sometime in the future</span><input type="radio" name="PriorityRank_2" value="Priority_4" style="width: 25px"/>
<span class="spacer">Never</span><input type="radio" name="PriorityRank_2" value="Priority_5" style="width: 25px"/>
</div>
</div>
<div id="divBlock_3" class="divBlocks_sub1">
<h5 id="outerText_3" onclick="chkSelect(3);">Dining / All Purpose Room</h5>
<div id="innerText_3" style="display: none">
<h6 class="spacer">Need:</h6>
<span class="spacer">Absolutely must have</span><input type="radio" name="NeedRank_3" value="need_1" style="width: 25px"/>
<span class="spacer">Kind of want , but OK if we don't have</span><input type="radio" name="NeedRank_3" value="need_2" style="width: 25px"/>
<span class="spacer">Neither here nor there</span><input type="radio" name="NeedRank_3" value="need_3" style="width: 25px"/>
<span class="spacer">Kind of don't want, but OK if we have</span><input type="radio" name="NeedRank_3" value="need_4" style="width: 25px"/>
<span class="spacer">Absolutely don't want</span><input type="radio" name="NeedRank_3" value="need_5" style="width: 25px"/>
<br/><br/>
<h6 class="spacer">Priority:</h6>
<span class="spacer">One of the first things to do</span><input type="radio" name="PriorityRank_3" value="Priority_1" style="width: 25px"/>
<span class="spacer">Within a year or two</span><input type="radio" name="PriorityRank_3" value="Priority_2" style="width: 25px"/>
<span class="spacer">Within the first ten years</span><input type="radio" name="PriorityRank_3" value="Priority_3" style="width: 25px"/>
<span class="spacer">Sometime in the future</span><input type="radio" name="PriorityRank_3" value="Priority_4" style="width: 25px"/>
<span class="spacer">Never</span><input type="radio" name="PriorityRank_3" value="Priority_5" style="width: 25px"/>
</div>
</div>
<div id="divBlock_4" class="divBlocks_sub1">
<h5 id="outerText_4" onclick="chkSelect(4);">Office</h5>
<div id="innerText_4" style="display: none">
<h6 class="spacer">Need:</h6>
<span class="spacer">Absolutely must have</span><input type="radio" name="NeedRank_4" value="need_1" style="width: 25px"/>
<span class="spacer">Kind of want , but OK if we don't have</span><input type="radio" name="NeedRank_4" value="need_2" style="width: 25px"/>
<span class="spacer">Neither here nor there</span><input type="radio" name="NeedRank_4" value="need_3" style="width: 25px"/>
<span class="spacer">Kind of don't want, but OK if we have</span><input type="radio" name="NeedRank_4" value="need_4" style="width: 25px"/>
<span class="spacer">Absolutely don't want</span><input type="radio" name="NeedRank_4" value="need_5" style="width: 25px"/>
<br/><br/>
<h6 class="spacer">Priority:</h6>
<span class="spacer">One of the first things to do</span><input type="radio" name="PriorityRank_4" value="Priority_1" style="width: 25px"/>
<span class="spacer">Within a year or two</span><input type="radio" name="PriorityRank_4" value="Priority_2" style="width: 25px"/>
<span class="spacer">Within the first ten years</span><input type="radio" name="PriorityRank_4" value="Priority_3" style="width: 25px"/>
<span class="spacer">Sometime in the future</span><input type="radio" name="PriorityRank_4" value="Priority_4" style="width: 25px"/>
<span class="spacer">Never</span><input type="radio" name="PriorityRank_4" value="Priority_5" style="width: 25px"/>
</div>
</div>
</form>