?
Solved

Adding same page content based on select box (drop down menu) selections

Posted on 2005-03-03
5
Medium Priority
?
150 Views
Last Modified: 2010-04-09
Is this possible? -- I have a page and the user is asked a question with "-", "yes", and "no" as the choices in the drop down select box. I want another question to suddenly appear under it (the question that appears is based on their selection of yes or no) on the same page, with the first y/n question still displayed above it.

If possible I would also like the subsequent questions to appear instantly after the user makes his/her choice from the select box (in other words automatically launching the new question without a "submit" button).

Thanks for any help.
0
Comment
Question by:scottie_24
  • 2
  • 2
5 Comments
 
LVL 32

Accepted Solution

by:
Batalf earned 1600 total points
ID: 13454664
Is it something like this?


<html>
    <body>
    <script>
    function showChoice(inputValue){
        var elementToShow = 'nextQuestion_'+inputValue;
        var elementToHide = 'nextQuestion_';
        if(inputValue=='yes')elementToHide+="no"; else elementToHide+="yes";
        var objShow = document.getElementById(elementToShow);
        var objHide = document.getElementById(elementToHide);
        if(objHide){
            objShow.style.display='block';
            objHide.style.display='none';
           
        }
   
    }
    </script>
    <form>
    Question: <select name="yourchoice" onchange="showChoice(this.options[this.selectedIndex].value)">
            <option value="">-</option>
            <option value="yes">Yes</option>
            <option value="no">No</option>
            </select>
    <br>
    <div id="nextQuestion_yes" style="display:none;margin-top:5px;padding:10px;border:1px dotted #000000;width:500px">
    You answered yes. Next question: <select name="yourchoice" onchange="showChoice(this.options[this.selectedIndex].value)">
            <option value="">-</option>
            <option value="yes">Yes</option>
            <option value="no">No</option>
            </select>    
   
    </div>
    <div id="nextQuestion_no" style="display:none;margin-top:5px;padding:10px;border:1px dotted #000000;width:500px">
    You answered no. Next question: <select name="yourchoice" onchange="showChoice(this.options[this.selectedIndex].value)">
            <option value="">-</option>
            <option value="yes">Yes</option>
            <option value="no">No</option>
            </select>    
   
    </div>
   
    </form>
</body>
</html>
0
 
LVL 32

Expert Comment

by:Batalf
ID: 13454676
For safety add this line as the first line in function showChoice:

if(!inputValue.length)return;

0
 

Author Comment

by:scottie_24
ID: 13455142
Hi Batalf, I'm sorry but I won't be able to check this until tomorrow morning. It looks good though.
0
 

Author Comment

by:scottie_24
ID: 13458909
Batalf,

How would I modify that to repeatedly have new questions appear down the page based on their answer to the question immediately above it? Let me know if you think I should ask this follow up question in a new post/thread, thanks.

Scottie
0
 
LVL 19

Assisted Solution

by:dakyd
dakyd earned 400 total points
ID: 13489524
Did you mean this?  Hope it helps.

<html>
<head>
<script type="text/javascript">
function showChoice(theForm, inputValue)
{
  var elementToShow = 'nextQuestion_'+inputValue;
  var elementToHide = 'nextQuestion_';
  elementToHide += (inputValue == "yes")? "no": "yes";

  var objShow = document.getElementById(elementToShow);
  objShow = objShow.cloneNode(true);
  theForm.appendChild(objShow);
  objShow.style.display = "block";
}
</script>
</head>

<body>
    <form>
    Question: <select name="yourchoice" onchange="showChoice(this.form,

this.options[this.selectedIndex].value)">
            <option value="">-</option>
            <option value="yes">Yes</option>
            <option value="no">No</option>
            </select>
    </form>

<div id="nextQuestion_yes" style="display:none;margin-top:5px;padding:10px;border:1px dotted

#000000;width:500px">
    You answered yes. Next question: <select name="yourchoice" onchange="showChoice(this.form,

this.options[this.selectedIndex].value)">
            <option value="">-</option>
            <option value="yes">Yes</option>
            <option value="no">No</option>
            </select>    
   
</div>
<div id="nextQuestion_no" style="display:none;margin-top:5px;padding:10px;border:1px dotted

#000000;width:500px">
    You answered no. Next question: <select name="yourchoice" onchange="showChoice(this.form,

this.options[this.selectedIndex].value)">
            <option value="">-</option>
            <option value="yes">Yes</option>
            <option value="no">No</option>
            </select>    
   
</div>
</body>
</html>
0

Featured Post

Independent Software Vendors: 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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

621 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question