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

Display page content depending on condition of radio button

I want to create a web-based questionnaire that asks a series of questions. I want the form to only display certain questions if the previous question in the list meets a certain condion (i.e a radio button to select yes/no) so that if "yes" is selected then two more questions appear. One way to do this would be to open a new window with the new questions in but I would prefer for the questions to just become available on the same page by expanding the current question but without a page refresh.

Is this possible I'm using Jscript ASP
0
Milkybar-kid
Asked:
Milkybar-kid
  • 3
  • 2
  • 2
  • +3
5 Solutions
 
hujiCommented:
Well, that way, you need a Javascript code, since this is going to happen on client's side.
For example:
...
<input type=checkbox onClick="showHide()">

...

function showHide(){
      if(document.getElementById("nextQuestion").style.visibility=="visible"){document.getElementById("nextQuestion").style.visibility="hidden"}else{document.getElementById("nextQuestion").style.visibility="visible"}
}

Wish I can help
Huji
0
 
Milkybar-kidAuthor Commented:
Thanks - that looks interesting. Can you expand a little on how the styles are applied to the elements concerned ?
0
 
Milkybar-kidAuthor Commented:
Hmmm - I think I see how this functions but I was hoping to get it to expand and collapse as required rather than just turn it on and off : - like this

1) Is question1 true    []Yes  []No
2)The next question

But then if question 1 is true display this :-

1) Is question1 true    [X]Yes  []No
          1a) sub question1
          1b) sub question2
2)The next question
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!

 
sciber_dudeCommented:
@ Milkybar-kid,

Just a word of caution when u use disappearing and appearing DIVs

if you use Javascript to do such display ... esp when u use checkboxes you will get this paradox.

Let me explain better.
1. When the page loads, only Question 1 is visible and not Question 2.
2. Question 1 has checkboxes and if you check the first Q1 checkbox, Question 2 becomes visible. (All is fine till here)
3. You submit to go to the next page.

4. The user decides he needs to change something in the first page.. so clicks the Browsers back button...
5. Only Question 1 is displayed (even though the Q1 first checkbox is checked).
6. Unchecking the Q1 first checkbox will then display the Question 2 (paradox)

If you are unclear on this, let me know and i can create a simulation of this and send you the link and u can view it.

:) SD
0
 
robotman757Commented:
You can create a table with each question getting one row on the table. You give each row a different id like 'q1' or 'q1a'. Then you set the main questions to visible, and the sub questions to hidden. Then, you write a script that checks the condition of the question and if it meets the criteria you want, then show the next row. This will do what you want. Maybe not the most ideal solution, but it will work. You can write one big script, or write a script for only the questions that have the sub questions.
0
 
jpontaniCommented:
This is a quickie method.  Set the style of the hidden items to "display:none", and give it a unique ID.  That way when the page loads they don't show up.  Then once the person clicks on the option that makes them appear, you call the function toggle().  Pass it the item to display, and whether to show it or not.  

The JS code:
<script language="javascript">
function toggle(item, onoff) {
      if(onoff == "on") {
            item.style.display = "block";
      } else if(onoff == "off") {
            item.style.display = "none";
      }
}
</script>

The page:
<table width=100%>
<tr>
      <td>Question 1:&nbsp;&nbsp;Yes<input type="radio" name="q1" onclick="toggle(q1a, 'on');">&nbsp;No<input type="radio" name="q1" onclick="toggle(q1a, 'off');"></td>
</tr>
<tr id="q1a" style="display: none">
      <td>Question 1A:&nbsp;&nbsp;Yes<input type="radio" name="q1">&nbsp;No<input type="radio" name="q1"></td>
</tr>
</table>
0
 
hujiCommented:
If you want the new questions (subquestions) to become visible AND push the next lines of text down, then you can use style.display property:
obj.style.display="none" means that the object is not shown.
obj.style.display="block" means that it appears, and pushes the rest of the contents down.
More help on this special thing can be found here.:
http://www.devguru.com/Technologies/css/quickref/css_display.html
jpontani has sent a good code example sooner than me.
Wish I can help
Huji
0
 
ftaco96Commented:
Here's a modification of jpontani's code that takes into account sciber_dude's very legitimate concerns.

The JS code:
<script language="javascript">
function win_onload() {
    toggle(trQ1a, q1.value);
}

function toggle(item, onoff) {
     if(onoff == "on") {
          item.style.display = "block";
     } else if(onoff == "off") {
          item.style.display = "none";
     }
}
</script>

The page:
<table width=100%>
<tr>
     <td>Question 1:&nbsp;&nbsp;
         <input type="radio" name="q1" value="on" onclick="toggle(trQ1a, 'on');">&nbsp;Yes&nbsp;
         <input type="radio" name="q1" value="off" onclick="toggle(trQ1a, 'off');">&nbsp;No&nbsp;
     </td>
</tr>
<tr id="trQ1a" style="display: none">
     <td>Question 1A:&nbsp;&nbsp;
         <input type="radio" name="q1a">&nbsp;Yes&nbsp;
         <input type="radio" name="q1a">&nbsp;No&nbsp;
      </td>
</tr>
</table>
0
 
sciber_dudeCommented:
@ ftaco96 -

Bravo!!!!

:) SD
0
 
ftaco96Commented:
Thanks SD!
0
 
jpontaniCommented:
Yeah I noticed he also fixed my erroneous radio button names :).  I forgot to rename as I just did a quick copy/paste.
0
 
Milkybar-kidAuthor Commented:
How can I award the points for this one ? everyone had a useful input thanks. I'm just going to do an even split. I hope that is OK
0

Featured Post

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!

  • 3
  • 2
  • 2
  • +3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now