...
PDA

Problem w showing/hiding questions

robbymo
05-09-2007, 01:42 AM
I am trying to implement a dynamic form and can not get the questions to be initially hidden, showing only after a Problem is chosen.

Each question should be able to be shown/hidden individually. The group of questions to display for each Problem should be designated in an array, which is used with a show/hide function to show or hide each question as desired, depending on what group is active

I have it where there hidden but can't get them back.....


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title>
Dynamic Form
</title>

<style>
.Question {
display:none;

}
</style>


<script language="JavaScript" type="text/javascript">
<!--


function ShowHide(sel){
for (var zxc0=1;zxc0<4;zxc0++){
for (var zxc0a=1;zxc0a<6;zxc0a++){
if (document.getElementById('s'+zxc0+'q'+zxc0a)){
document.getElementById('s'+zxc0+'q'+zxc0a).style.display=(zxc0==sel.value)?'':'none';
}
}
}
}

//-->


</script>
</head>



<body>
choose problem that is happening from the list.<br>

<select name="problem" size="1" onChange="ShowHide(this)">
<option value="1">
Problem 1
</option>
<option value="2">
Problem 2
</option>
<option value="3">
Problem 3
</option>
</select>
</td>
<td>

<div id="s1q1" class="Question">
Question1 Set1:<BR> <textarea cols="40" rows="5" name="myname">
</textarea><BR>
</div>
<div id="s1q2" class="Question">
Question2:<BR> <textarea cols="40" rows="5" name="myname">
</textarea><BR>
</div>
<div id="s1q3" class="Question">
Question3:<BR> <textarea cols="40" rows="5" name="myname">
</textarea><BR>
</div>
<div id="s1q4" class="Question">
Question4:<BR> <textarea cols="40" rows="5" name="myname">
</textarea><BR>
</div>
<div id="s1q5" class="Question">
Question5:<BR> <textarea cols="40" rows="5" name="myname">
</textarea><BR>
</div>
<!--
<div id="s2q1 class="Question">
Question1Set2:<BR> <textarea cols="40" rows="5" name="myname">
</textarea><BR>
</div>
<div id="s2q2 class="Question">
Question2:<BR> <textarea cols="40" rows="5" name="myname">
</textarea><BR>
</div>
<div id="s2q3 class="Question">
Question3:<BR> <textarea cols="40" rows="5" name="myname">
</textarea><BR>
</div>
<div id="s2q4 class="Question">
Question4:<BR> <textarea cols="40" rows="5" name="myname">
</textarea><BR>
</div>
<div id="s2q5 class="Question">
Question5:<BR> <textarea cols="40" rows="5" name="myname">
</textarea><BR>
</div>

<div id="s3q1 class="Question">
Question1set3:<BR> <textarea cols="40" rows="5" name="myname">
</textarea><BR>
</div>
<div id="s3q2 class="Question">
Question2:<BR> <textarea cols="40" rows="5" name="myname">
</textarea><BR>
</div>
<div id="s3q3 class="Question">
Question3:<BR> <textarea cols="40" rows="5" name="myname">
</textarea><BR>
</div>
<div id="s3q4 class="Question">
Question4:<BR> <textarea cols="40" rows="5" name="myname">
</textarea><BR>
</div>
<div id="s3q5 class="Question">
Question5:<BR> <textarea cols="40" rows="5" name="myname">
</textarea><BR>
</div>
-->
</form>
</td>
</div>


</body>
</html>
</body>
tram
05-09-2007, 03:25 AM
robbymo, i edited your code and i think this works the way you want it to:D



<html>

<head>
<title>
Dynamic Form
</title>

<style>
.Question {
display:none;

}
</style>


<script language="JavaScript" type="text/javascript">
<!--


function ShowHide(sel){
var probnum = document.getElementById('problem').value;
var disp='';
if((sel.value==null) || (sel.value.length==0)){
document.getElementById('ques').innerHTML ='none';
}
else {
for (var i=1; i<6 ; i++){
disp = disp + (document.getElementById('s'+probnum+'q'+i).innerHTML);
}
document.getElementById('ques').innerHTML =disp;
}
}

//-->


</script>
</head>



<body>
choose problem that is happening from the list.<br>

<select id="problem" size="1" onChange="ShowHide(this)">
<option value=""></option>
<option value="1">
Problem 1
</option>
<option value="2">
Problem 2
</option>
<option value="3">
Problem 3
</option>
</select>
</td>
<td>
<div id='ques'></div>
<div id="s1q1" class="Question" >
Question1 Set1:<BR> <textarea cols="40" rows="5" name="myname1">
</textarea><BR>
</div>
<div id="s1q2" class="Question">
Question2:<BR> <textarea cols="40" rows="5" name="myname2">
</textarea><BR>
</div>
<div id="s1q3" class="Question">
Question3:<BR> <textarea cols="40" rows="5" name="myname3">
</textarea><BR>
</div>
<div id="s1q4" class="Question">
Question4:<BR> <textarea cols="40" rows="5" name="myname4">
</textarea><BR>
</div>
<div id="s1q5" class="Question">
Question5:<BR> <textarea cols="40" rows="5" name="myname5">
</textarea><BR>
</div>


<div id="s2q1" class="Question">
Question1Set2:<BR> <textarea cols="40" rows="5" name="myname1">
</textarea><BR>
</div>
<div id="s2q2" class="Question">
Question2:<BR> <textarea cols="40" rows="5" name="myname2">
</textarea><BR>
</div>
<div id="s2q3" class="Question">
Question3:<BR> <textarea cols="40" rows="5" name="myname3">
</textarea><BR>
</div>
<div id="s2q4" class="Question">
Question4:<BR> <textarea cols="40" rows="5" name="myname4">
</textarea><BR>
</div>
<div id="s2q5" class="Question">
Question5:<BR> <textarea cols="40" rows="5" name="myname5">
</textarea><BR>
</div>

<div id="s3q1" class="Question">
Question1set3:<BR> <textarea cols="40" rows="5" name="myname1">
</textarea><BR>
</div>
<div id="s3q2" class="Question">
Question2:<BR> <textarea cols="40" rows="5" name="myname2">
</textarea><BR>
</div>
<div id="s3q3" class="Question">
Question3:<BR> <textarea cols="40" rows="5" name="myname3">
</textarea><BR>
</div>
<div id="s3q4" class="Question">
Question4:<BR> <textarea cols="40" rows="5" name="myname4">
</textarea><BR>
</div>
<div id="s3q5" class="Question">
Question5:<BR> <textarea cols="40" rows="5" name="myname5">
</textarea><BR>
</div>

</form>
</td>
</div>


</body>
</html>
</body>
robbymo
05-17-2007, 01:47 AM
Thank you so much but I've recently been instructed to comment out sets 2 and 3 questions and now I have to follow this with one set of questions

First form field is select option:
Problem1
Problem2
Problem3

If choose Problem1, show
Question1
Question2
Question3
Question4

If choose Problem2, show
Question1
Question2
Question5
Question6

If choose Problem3, show
Question2
Question7
Question6


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title>
Dynamic Form
</title>

<style>
.Question {
display:none;

}
</style>


<script language="JavaScript" type="text/javascript">
<!--


function ShowHide(s1){
var probnum = document.getElementById('problem').value;
var disp='';
if((sel.value==null) || (sel.value.length==0)){
document.getElementById('ques').innerHTML ='none';
}
else {
for (var i=1; i<6 ; i++){
disp = disp + (document.getElementById('s'+probnum+'q'+i).innerHTML);
}
document.getElementById('ques').innerHTML =disp;





}
}
}
}

//-->


</script>
</head>



<body>


choose problem that is happening from the list.<br>

<select name="problem" size="1" onChange="ShowHide(this)">
<option value="1">
Problem 1
</option>
<option value="2">
Problem 2
</option>
<option value="3">
Problem 3
</option>
</select>
</td>
<td>

<div id="s1q1" class="Question">
Question1 Set1:<BR> <textarea cols="40" rows="5" name="myname">
</textarea><BR>
</div>
<div id="s1q2" class="Question">
Question2:<BR> <textarea cols="40" rows="5" name="myname">
</textarea><BR>
</div>
<div id="s1q3" class="Question">
Question3:<BR> <textarea cols="40" rows="5" name="myname">
</textarea><BR>
</div>
<div id="s1q4" class="Question">
Question4:<BR> <textarea cols="40" rows="5" name="myname">
</textarea><BR>
</div>
<div id="s1q5" class="Question">
Question5:<BR> <textarea cols="40" rows="5" name="myname">
</textarea><BR>
</div>
<div id="s1q6" class="Question">
Question6:<BR> <textarea cols="40" rows="5" name="myname">
</textarea><BR>
</div>
<div id="s1q7" class="Question">
Question7:<BR> <textarea cols="40" rows="5" name="myname">
</textarea><BR>
</div>

<!--
<div id="s2q1 class="Question">
Question1Set2:<BR> <textarea cols="40" rows="5" name="myname">
</textarea><BR>
</div>
<div id="s2q2 class="Question">
Question2:<BR> <textarea cols="40" rows="5" name="myname">
</textarea><BR>
</div>
<div id="s2q3 class="Question">
Question3:<BR> <textarea cols="40" rows="5" name="myname">
</textarea><BR>
</div>
<div id="s2q4 class="Question">
Question4:<BR> <textarea cols="40" rows="5" name="myname">
</textarea><BR>
</div>
<div id="s2q5 class="Question">
Question5:<BR> <textarea cols="40" rows="5" name="myname">
</textarea><BR>
</div>

<div id="s3q1 class="Question">
Question1set3:<BR> <textarea cols="40" rows="5" name="myname">
</textarea><BR>
</div>
<div id="s3q2 class="Question">
Question2:<BR> <textarea cols="40" rows="5" name="myname">
</textarea><BR>
</div>
<div id="s3q3 class="Question">
Question3:<BR> <textarea cols="40" rows="5" name="myname">
</textarea><BR>
</div>
<div id="s3q4 class="Question">
Question4:<BR> <textarea cols="40" rows="5" name="myname">
</textarea><BR>
</div>
<div id="s3q5 class="Question">
Question5:<BR> <textarea cols="40" rows="5" name="myname">
</textarea><BR>
</div>
-->
</form>
</td>
</div>


</body>
</html>
</body>
tram
05-17-2007, 04:16 AM
hi, i think this answers your question:cool:

<html>

<head>
<title>
Dynamic Form
</title>

<style>
.Question {
display:none;

}
</style>


<script language="JavaScript" type="text/javascript">
<!--


function ShowHide(sel){
var probnum = document.getElementById('problem').value;
var disp='';
if((sel.value==null) || (sel.value.length==0)){
document.getElementById('ques').innerHTML ='none';
}
else {
if(probnum=='1'){
for(var i=1; i<=4 ; i++){
disp = disp + (document.getElementById('q'+i).innerHTML);
}
}
else if(probnum=='2'){
disp = (document.getElementById('q1').innerHTML);
disp = disp + (document.getElementById('q2').innerHTML);
disp = disp + (document.getElementById('q5').innerHTML);
disp = disp + (document.getElementById('q6').innerHTML);
}
else{
disp = (document.getElementById('q2').innerHTML);
disp = disp + (document.getElementById('q6').innerHTML);
disp = disp + (document.getElementById('q7').innerHTML);
}
//for (var i=1; i<6 ; i++){
//disp = disp + (document.getElementById('s'+probnum+'q'+i).innerHTML);
//}
document.getElementById('ques').innerHTML =disp;
}
}

//-->


</script>
</head>



<body>
choose problem that is happening from the list.<br>

<select id="problem" size="1" onChange="ShowHide(this)">
<option value=""></option>
<option value="1">
Problem 1
</option>
<option value="2">
Problem 2
</option>
<option value="3">
Problem 3
</option>
</select>
</td>
<td>
<div id='ques'></div>
<div id="q1" class="Question" >
Question1:<BR> <textarea cols="40" rows="5" name="myname1">
</textarea><BR>
</div>
<div id="q2" class="Question">
Question2:<BR> <textarea cols="40" rows="5" name="myname2">
</textarea><BR>
</div>
<div id="q3" class="Question">
Question3:<BR> <textarea cols="40" rows="5" name="myname3">
</textarea><BR>
</div>
<div id="q4" class="Question">
Question4:<BR> <textarea cols="40" rows="5" name="myname4">
</textarea><BR>
</div>
<div id="q5" class="Question">
Question5:<BR> <textarea cols="40" rows="5" name="myname5">
</textarea><BR>
</div>
<div id="q6" class="Question">
Question6:<BR> <textarea cols="40" rows="5" name="myname6">
</textarea><BR>
</div>
<div id="q7" class="Question">
Question7:<BR> <textarea cols="40" rows="5" name="myname7">
</textarea><BR>
</div>

</form>
</td>
</div>


</body>
</html>
</body>

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum