dynamic drop down form using JavaScript

StackOverflow https://stackoverflow.com/questions/15823623

Question

I'd really like to have a drop down form using JavaScript. I need it to create a question essentially. How it works: The person, from the home page, will click "Create a Question" and it will go to the Create a Question page. On that page, the first question it asks the person is "What type of question would you like to ask?" and then, via a few radio buttons, they can select which type they want, either "Multiple Choice", "Select the Best" or "Short answer". From that point, more of the form appears…in other words, depending on which type of question they want to ask, a different set of criteria is asked for them to fill out before submitting to the server the question they'd like to ask. Does this make sense? Here is my form so far:

    <!DOCTYPE html>
    <html>
        <head>
            <title>Quick Bump</title>
            <link href="styles.css" type="text/css" rel="stylesheet" />
        </head>

        <body>
            <div class="center">

            <h1 class="welcomeHeader">Create a Question:</h1>
            <form action="http://www.example.com/profile.php">

            <p class="pStyle">Please select what type of Question you'd like to ask:
                <br />
                <br />
                <input type="radio" name="genre" value="Multiple Choice" checked="checked" /> Multiple Choice
                <input type="radio" name="genre" value="Select the Best" /> Select the Best
                <input type="radio" name="genre" value="Short Answer" /> Short Answer
            </p>
            <br />

            <p class="pStyle">What is your Question?
                <br />
                <br />
                <label>Q:<input type="text" class="resizedTextBox" name="Question" /></label><br />
            </p>
            <br />

            <p class="pStyle">What are the answers available?
                <br />
                <br />
                <label>A:<input type="text" class="resizedTextBox" name="Answer 1" /></label><br />
                <label>B:<input type="text" class="resizedTextBox" name="Answer 2" /></label><br />
                <label>C:<input type="text" class="resizedTextBox" name="Answer 3" /></label><br />
                <label>D:<input type="text" class="resizedTextBox" name="Answer 4" /></label><br />
            </p>
            <br />

            <p class="pStyle">Would you like to submit this question now?</p>
            <input type="submit" class="submitLink" name="submit form" value="Submit" />
        </form>
    </div>
    <br />
    <div class="footer">
        <a href="firstWebPage.html" class="links">Home</a>
    </div>
</body>

Was it helpful?

Solution

You can use jQuery to incrementally show each successive paragraph as the previous form element is changed.

Here's an example to hopefully get you started: http://jsfiddle.net/kevincollins/uarZb/

$(function () {
    $('.pStyle:first').show();
    $('input[name="genre"]').change(function(){
        $('.pStyle:eq(1)').show();
    });
    $('input[name="Question"]').change(function(){
         $('.pStyle:eq(2)').show();
    });
    $('input[name^="Answer"]').change(function(){
         $('.pStyle:eq(3)').show();
    });
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top