Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Apr 2007
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem w showing/hiding questions

    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>

  • #2
    New to the CF scene
    Join Date
    May 2007
    Location
    Phil
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    robbymo, i edited your code and i think this works the way you want it to



    <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>

  • #3
    New Coder
    Join Date
    Apr 2007
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #4
    New to the CF scene
    Join Date
    May 2007
    Location
    Phil
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hi, i think this answers your question

    <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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •