form with conditional questions

jcrowley · January 30th, 2007, 12:02 AM

I'm trying to code a form with additional conditional questions based on answers that were given in two prior questions, I've been working with layers, and thought that I had it done, but then realized that I have to not only suppress the questions that should not be visible, but also need to delete the space that those layers would otherwise take up on the form. I tried to accomplish this using css, but obviously don't have the necessary skill set to do it correctly. I would appreciate it is someone could give me an idea of what I'm doing wrong.

Here is my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<STYLE TYPE="text/css">
.forminput {
display: none;
}
</style>

<script type="text/javascript">
function updateQuestions() {
    q1=document.getElementById('q1_y').checked;
    q2=document.getElementById('q2_y').checked;

    // first, disable all elements or they will get 'stuck'
    for (x=3;x<=10;x++) {
        (document.getElementById('q' + x).style.display == 'block')
        document.getElementById('q' + x).style.display = 'none';;
    }

    if (q1 && !q2) {
        for (x=3;x<=10;x++) {
            (document.getElementById('q' + x).style.display == 'block')
            document.getElementById('q' + x).style.display = 'none';
        }
    } else if (q1 && q2) {
        for (x=3;x<=10;x++) {
            if (x!=9) {
                (document.getElementById('q' + x).style.display == 'block')
                document.getElementById('q' + x).style.display = 'none';
            }
        }
    } else if (!q1 && q2) {
        for (x=3;x<=10;x++) {
            if (x!=8&&x!=9) {
                (document.getElementById('q' + x).style.display == 'block')
                document.getElementById('q' + x).style.display = 'none';
            }
        }
    } else if (!q1 && !q2) {
        for (x=3;x<=10;x++) {
            if (x!=7&&x!=8&&x!=9) {
                (document.getElementById('q' + x).style.display == 'block')
                document.getElementById('q' + x).style.display = 'none';
            }
        }
    } else document.getElementById('q' + x).style.display = 'block';
}
</script>
</head>

<body>
<form id="form1" method="post" action="">
<p>Question 1</p>
<p>
<input id="q1_y" name="q1" type="radio" value="yes" onclick="updateQuestions()">
<input id="q1_n" name="q1" type="radio" value="no" onclick="updateQuestions()">
</p>

<p>Question 2 </p>
<p>
<input id="q2_y" name="q2" type="radio" value="yes" onclick="updateQuestions()">
<input id="q2_n" name="q2" type="radio" value="no" onclick="updateQuestions()">
</p>

<div id="q3" class='forminput'>
<p>Question 3 </p>
<p>
<input id="q3_y" type="radio" value="yes">
<input id="q3_n" type="radio" value="no">
</p>
</div>

<div id="q4" class='forminput'>
<p>Question 4 </p>
<p>
<input id="q4_y" type="radio" value="yes">
<input id="q4_n" type="radio" value="no">
</p>
</div>

<div id="q5" class='forminput'>
<p>Question 5 </p>
<p>
<input id="q5_y" type="radio" value="yes">
<input id="q5_n" type="radio" value="no">
</p>
</div>

<div id="q6" class='forminput'>
<p>Question 6 </p>
<p>
<input id="q6_y" type="radio" value="yes">
<input id="q6_n" type="radio" value="no">
</p>
</div>

<div id="q7" class='forminput'>
<p>Question 7 </p>
<p>
<input id="q7_y" type="radio" value="yes">
<input id="q7_n" type="radio" value="no">
</p>
</div>

<div id="q8" class='forminput'>
<p>Question 8 </p>
<p>
<input id="q8_y" type="radio" value="yes">
<input id="q8_n" type="radio" value="no">
</p>
</div>

<div id="q9" class='forminput'>
<p>Question 9 </p>
<p>
<input id="q9_y" type="radio" value="yes">
<input id="q9_n" type="radio" value="no">
</p>
</div>

<div id="q10" class='forminput'>
<p>Question 10 </p>
<p>
<input id="q10_y" type="radio" value="yes">
<input id="q10_n" type="radio" value="no">
</p>
</div>

<input id="submit" type="submit" value="Submit">
</form>

</body>
</html>