?
Solved

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

Posted on 2005-03-03
5
Medium Priority
?
145 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Video: Liquid Web Managed WordPress Comparisons

If you run run a WordPress, you understand the potential headaches you may face when updating your plugins and themes. Do you choose to update on the fly and risk taking down your site; or do you set up a staging, keep it in sync with your live site and use that to test updates?

Question has a verified solution.

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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
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…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Suggested Courses

765 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