Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Post an Article
Welcome To Ask or Share your Answers For Others

Categories

javascript - How do I add a show/hide to Questionnaire form

0 votes
287 views
in Technique[技术] by (71.8m points)

javascript - How do I add a show/hide to Questionnaire form

How do I make it so that every question is hidden until the above row image is clicked. I basically want to add a show/hide div to this form. When every question is answered the "Next" button pops shows at the end. If a user decides to change his mind and clicks on another answer or image then everything goes back into hiding and shows the contents again. I've created a separate testing form and it works but it function how I want it so now I'm here. Help me. 

<!DOCTYPE html>
<html>

    <head>
        <script type="text/javascript">
            $(window).load(function () {
                $('.radio div').on('click', function () {
                    var $this = $(this),
                        $parent = $this.parent(),
                        value = $this.attr('value');

                    $parent.children().removeClass('active');
                    $this.addClass('active');
                    $parent.attr('value', value);

                    //get all selected radios
                    var q1 = $('div[name="q1"].active');
                    var q2 = $('div[name="q2"].active');
                    var q3 = $('div[name="q3"].active');
                    var q4 = $('div[name="q4"].active');

                    //make sure the user has selected all 3
                    if (q1.length !== 0 && q2.length !== 0 && q3.length !== 0 && q4.length !== 0) {
                        //now we know we have 3 radios, so get their values
                        q1 = q1.attr('value');
                        q2 = q2.attr('value');
                        q3 = q3.attr('value');
                        q4 = q4.attr('value');

                        // activate button
                        $('#next_button').removeAttr('disabled');

                        //now check the values to display a different link for the desired   
                        configuration
                        if (q1 == "AT&T" && q2 == "8GB" && q3 == "Black" && q4 == "Black") {
                            $('#next_button').val('att 8gb black').click(function () {
                                window.location.href = 'http://google.com/'
                            });
                        } else if (q1 == "AT&T" && q2 == "16GB" && q3 == "White" && q4 == "Black") {
                            document.getElementById("linkDiv").innerHTML = "<input type=button value=Next  
    onclick="window.location.href='http://bing.com/';">another option</input>";
                        } else if (q1 == "AT&T" && q2 == "16GB" && q3 == "Black" && q4 == "Black") {
                            document.getElementById("linkDiv").innerHTML = "<input type=button value=Next 
    onclick="window.location.href='http://gmail.com/';">oops</input>";
                        } else if (q1 == "AT&T" && q2 == "8GB" && q3 == "White" && q4 == "Black") {
                            document.getElementById("linkDiv").innerHTML = "<input type=button value=Next 
    onclick="window.location.href='http://hotmail.com/';">can't</input>";
                        } else if (q1 == "Unlocked" && q2 == "8GB" && q3 == "White" && q4 == "Black") {
                            document.getElementById("linkDiv").innerHTML = "<input type=button value=Next 
    onclick="window.location.href='http://wepriceit.webs.com/';">red</input>";
                        } else if (q1 == "Unlocked" && q2 == "8GB" && q3 == "Black" && q4 == "Black") {
                            document.getElementById("linkDiv").innerHTML = "<input type=button value=Next 
    onclick="window.location.href='http://webs.com/';">orange</input>";
                        } else if (q1 == "Unlocked" && q2 == "16GB" && q3 == "White" && q4 == "Black") {
                            document.getElementById("linkDiv").innerHTML = "<input type=button value=Next 
    onclick="window.location.href='http://gazelle.com/';">green</input>";
                        } else if (q1 == "Unlocked" && q2 == "16GB" && q3 == "Black" && q4 == "Black") {
                            document.getElementById("linkDiv").innerHTML = "<input type=button value=Next 
    onclick="window.location.href='http://glyde.com/';">blue</input>";
                        }
                    }

                });

            }); //]]>
        </script>
    </head>

    <body class="questionnaire">
        <form name="quiz" id='quiz'>
             <h4>Choose your series.</h4>

            <div class="radio" id="form">
                <div style="list-style: none;" type="radio" name="q4" value="iPhone-3GS">
                    <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-3GS.png"
                    />
                </div>
                <div style="list-style: none;" type="radio" name="q4" value="iPhone-4">
                    <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-4.png"
                    />
                </div>
                <div style="list-style: none;" type="radio" name="q4" value="iPhone-4S">
                    <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-4S.png"
                    />
                </div>
                <div style="list-style: none;" type="radio" name="q4" value="iPhone-5">
                    <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-5.png"
                    />
                </div>
            </div>
            <div style="list-style: none;" type="radio" name="q4" value="iPhone-5">
                <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-5.png"
                />
            </div>
            </div>
            <div style="list-style: none;" type="radio" name="q4" value="iPhone-5">
                <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-5.png"
                />
            </div>
            </div>
            <br />
            <br />
            <BR>
             <h4>What carrier do you have?</h4>

            <div class="radio" id="form">
                <div style="list-style: none;" name="q1" value="AT&T">
                    <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/ATT-logo.png"
                    />
                </div>
                <div style="list-style: none;" name="q1" value="Unlocked">
                    <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/Factory-Unlocked.png"
                    />
                </div>
            </div>
            <br />
            <br />
            <BR>
             <h4>What is your phones capicity?</h4>

            <div class="radio" id="form">
                <div style="list-style: none;" type="radio" name="q2" value="8GB">
                    <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/8GB.png"
                    />
                </div>
                <div style="list-style: none;" type="radio" name="q2" value="16GB">
                    <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/16GB.png"
                    />
                </div>
            </div>
            <br />
            <br />
            <BR>
             <h4>What color is your phone?</h4>

            <div class="radio" id="form">
                <div style="list-style: none;" type="radio" name="q3" value="iPhone-3GS">
                    <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-3GS.png"
                    />
                </div>
                <div style="list-style: none;" type="radio" name="q3" value="iPhone-4">
                    <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-4.png"
                    />
                </div>
                <div style="list-style: none;" type="radio" name="q3" value="iPhone-4S">
                    <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-4S.png"
                    />
                </div>
                <div style="list-style: none;" type="radio" name="q3" value="iPhone-5">
                    <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-5.png"
                    />
                </div>
            </div>
            <br/>
            <br />
            <br />
            <BR>
            <BR>
            <div id="linkDiv">
                <input id="next_button" type="button" disabled="disabled" value="Next"
                />
            </div>
        </form>
    </body>

</html>

http://jsfiddle.net/urr3B/

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

First of all you have a lot of errors in your html. There are unclosed tags, same ids, type attribute on a div, but it should be in an input field. Besides that, my idea is to wrap every question in a div and show/hide it when you need. Here is the code for that:

var questions = $(".question");
var showQuestions = function(index) {
    for(var i=0; i<questions.length; i++) {
        if(i < index) {
            questions.eq(i).css("display", "block");
        } else {
            questions.eq(i).css("display", "none");
        }
    }    
}

for(var i=0; i<questions.length; i++) {
    (function(index) {
        questions.eq(index).find("div[type='radio']").on("click", function() {
            showQuestions(index+2);
        })
    })(i);
}
showQuestions(1);

And here is the full code of your page. 

<!DOCTYPE html>
<html>
<head>

    <style type='text/css'>
        .radio div[type='radio'] {
            background: url($image) no-repeat #eee;
            height:55px;
            width:60px;
            border:1px solid #DDD;
            border-radius:10px;
            padding:1px;
            float:left;
            margin-right:10px;
            cursor:pointer
        }
        .radio div.active{
            box-shadow:0 0 2px 1px #00f inset;
        }
        img {
            width: 60px;
            height: 55px;
            border: 0px solid #666;
            background: #fff;
            display:block;
            border-radius: 10px;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
        }
        .question {
            margin: 20px 0 20px 0;
            display: none;
            clear: both;
        }
        #linkDiv {
            margin: 0;
        }
        .clear {
            clear: both;
        }
    </style>

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">

$(window).load(function(){
$('.radio div').on('click', function() {
var $this   = $(this),
    $parent = $this.parent(),
    value   = $this.attr('value');

    $parent.children().removeClass('active');
    $this.addClass('active');
    $parent.attr('value', value);

    //get all selected radios
    var q1=$('div[name="q1"].active');
    var q2=$('div[name="q2"].active');
    var q3=$('div[name="q3"].active');
    var q4=$('div[name="q4"].active');

    //make sure the user has selected all 3
    if (q1.length !== 0 && q2.length !== 0 && q3.length !== 0 && q4.length !== 0)
    {
        //now we know we have 3 radios, so get their values
        q1=q1.attr('value');
        q2=q2.attr('value');
        q3=q3.attr('value');
        q4=q4.attr('value');

        // activate button
        $('#next_button').removeAttr('disabled');

        //now check the values to display a different link for the desired  configuration
        if (q1=="AT&T" && q2=="8GB" && q3=="Black" && q4=="Black")
        {
            $('#next_button').val('att 8gb black').click(function() {  
window.location.href='http://google.com/' } );
        }
        else if (q1=="AT&T" && q2=="16GB" && q3=="White" && q4=="Black")
        {
            document.getElementById("linkDiv").innerHTML="<input type=button value=Next onclick="window.location.href='http://bing.com/';">another option</input>";
        }
        else if (q1=="AT&T" && q2=="16GB" && q3=="Black" && q4=="Black")
        {
            document.getElementById("linkDiv").innerHTML="<input type=button value=Next onclick="window.location.href='http://gmail.com/';">oops</input>";
        }
        else if (q1=="AT&T" && q2=="8GB" && q3=="White" && q4=="Black")
        {
            document.getElementById("linkDiv").innerHTML="<input type=button value=Next onclick="window.location.href='http://hotmail.com/';">can't</input>";
        }

        else if (q1=="Unlocked" && q2=="8GB" && q3=="White" && q4=="Black")
        {
            document.getElementById("linkDiv").innerHTML="<input type=button value=Next onclick="window.location.href='http://wepriceit.webs.com/';">red</input>";
        }
        else if (q1=="Unlocked" && q2=="8GB" && q3=="Black" && q4=="Black")
        {
            document.getElementById("linkDiv").innerHTML="<input type=button value=Next onclick="window.location.href='http://webs.com/';">orange</input>";
        }
        else if (q1=="Unlocked" && q2=="16GB" && q3=="White" && q4=="Black")
        {
            document.getElementById("linkDiv").innerHTML="<input type=button value=Next onclick="window.location.href='http://gazelle.com/';">green</input>";
        }
        else if (q1=="Unlocked" && q2=="16GB" && q3=="Black" && q4=="Black")
        {
            document.getElementById("linkDiv").innerHTML="<input type=button value=Next onclick="window.location.href='http://glyde.com/';">blue</input>";
        }
    }

}); 

var questions = $(".question");
var showQuestions = function(index) {
    for(var i=0; i<questions.length; i++) {
        if(i < index) {
            questions.eq(i).css("display", "block");
        } else {
            questions.eq(i).css("display", "none");
        }
    }    
}

for(var i=0; i<questions.length; i++) {
    (function(index) {
        questions.eq(index).find("div[type='radio']").on("click", function() {
            showQuestions(index+2);
        })
    })(i);
}
showQuestions(1);

});//]]>  

</script>

</head>
<body class="questionnaire">

<form name="quiz" id='quiz'>

    <div class="question">
        <h4>Choose your series.</h4>
        <div class="radio" id="form">
            <div type="radio" name="q4" value="iPhone-3GS">
                <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-3GS.png" />
            </div>
            <div type="radio" name="q4" value="iPhone-4">
                <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-4.png" />
            </div>
            <div type="radio" name="q4" value="iPhone-4S">
                <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-4S.png" />
            </div>
            <div type="radio" name="q4" value="iPhone-5">
                <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-5.png" />
            </div>
            <div type="radio" name="q4" value="iPhone-5">
                <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-5.png" />
            </div>
            <div type="radio" name="q4" value="iPhone-5">
                <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-5.png" />
            </div>
        </div>
    </div>

    <br class="clear" />
    <div class="question">
        <h4>What carrier do you have?</h4>
        <div class="radio" id="form">
            <div type="radio" name="q1" value="AT&T">
                <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/ATT-logo.png" />
            </div>   
            <div type="radio" name="q1" value="Unlocked">
                <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/Factory-Unlocked.png" />
            </div>
        </div>
    </div>

    <br class="clear" />
    <div class="question">
        <h4>What is your phones capicity?</h4>
        <div class="radio" id="form">
            <div type="radio" name="q2" value="8GB">
                <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/8GB.png" />
            </div>
            <div type="radio" name="q2" value="16GB">
                <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/16GB.png" />
            </div>
        </div>
    </div>

    <br class="clear" />
    <div class="question">
        <h4>What color is your phone?</h4>
            <div class="radio" id="form">
                <div type="radio" name="q3" value="iPhone-3GS">
                    <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-3GS.png" />
                </div>
                <div type="radio" name="q3" value="iPhone-4">
                    <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-4.png" />
                </div>
                <div type="radio" name="q3" value="iPhone-4S">
                    <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-4S.png" />
                </div>
                <div type="radio" name="q3" value="iPhone-5">
                    <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-5.png" />
                </div>
            </div>
    </div>

    <br class="clear" />
    <div id="linkDiv">
        <input id="next_button" type="button" disabled="disabled" value="Next" />
    </div>

</form>

</body>
</html>

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界，一个免费开放的程序员编程交流平台！开放，进步，分享！让技术改变生活，让极客改变未来！ Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

Just Browsing Browsing

1.4m articles

1.4m replys

5 comments

57.0k users

Most popular tags

Snow Theme by Q2A Market
Powered by Question2Answer
...