Wrox Programmer Forums
Go Back   Wrox Programmer Forums > PHP/MySQL > PHP How-To
|
PHP How-To Post your "How do I do this with PHP?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the PHP How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old January 30th, 2007, 12:02 AM
Registered User
 
Join Date: Jan 2007
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Default form with conditional questions

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>






Similar Threads
Thread Thread Starter Forum Replies Last Post
Form email Questions John10Yes ASP.NET 2.0 Basics 4 September 15th, 2006 10:58 AM
Access Form Questions sario777 Access 2 April 12th, 2005 06:38 PM
Javascript Form Questions The_Jackal Javascript How-To 0 August 24th, 2004 12:50 PM
conditional form submission moushumi Classic ASP Basics 1 March 30th, 2004 08:12 AM
Form validation & conditional return confirmation GMiles1972 Javascript How-To 3 February 3rd, 2004 11:31 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.