CODEWITHSUNDEEP
javascriptjqueryhtml
icekomo
icekomo

Reputation: 9466

5 user inputs for a survey, all hidden and then revealed after that last input is answered

I have a list of 5 questions with most having a yes or no response. I have them all hidden except for the first one. I am trying to figure out a way that once the question is answered it will then show the next one in order.I was hoping to use a switch statement to check the id of the parent div of the button that was clicked. I'm not sure how to check a parents ID from a jquery point of view, of if that's even the proper way to achieve my goal.

HTML

<div class="col-xs-12 col-md-6 col-md-offset-2 study-question" id="q-1">
    <p><strong>1.</strong> ARE YOU OVER THE AGE OF 18?</p>
    <input name="radio" type='hidden' value="Yes"/>
    <div class="btn-group btn-toggle">
        <button type="button" class="btn btn-default yes-no" data-radio-name="radio">Yes</button>
        <button type="button" class="btn btn-default yes-no" data-radio-name="radio">No</button>
    </div>
</div>

<div class="col-xs-12 col-md-6 col-md-offset-2 study-question" id="q-2">
    <p><strong>2.</strong> HAVE YOU HAD SHINGLES?</p>
    <input name="radio" type='hidden' value="Yes"/>
    <div class="btn-group btn-toggle">
        <button type="button" class="btn btn-default yes-no btn-1" data-radio-name="radio">Yes</button>
        <button type="button" class="btn btn-default yes-no" data-radio-name="radio">No</button>
    </div>
</div>

JS

$('.yes-no').click(function(){
    $(this).closest('div').find('.yes-no').each(function(){
        $(this).removeClass('active');
    });

    $(this).addClass('active');
$(this).val()=='yes'?$(this).closest('div').find('.sub-question').show():$(this).closest('div').find('.sub-question').hide();

// this is where I was trying to turn the next question visible.
    console.log(this);

    if(this == $("#q-1"))
    {
        questionArray[1].show();
    }
});

Upvotes: 0

Views: 74

Answers (2)

Kiran Shakya
Kiran Shakya

Reputation: 2559

$(document).ready(function(){
    var divs= $("div.study-question");
    divs.hide();
    $(divs[0]).show();
    $('button.btn').click(function(){
        var myParent=$(this).parents("div.study-question:first");
        myParent.hide();
        var nextSibling=myParent.next('div.study-question');
        if(nextSibling.length>0){
            nextSibling.show();
        }else{
            alert("End of Questions");
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><div class="col-xs-12 col-md-6 col-md-offset-2 study-question" id="q-1">
    <p><strong>1.</strong> ARE YOU OVER THE AGE OF 18?</p>
    <input name="radio" type='hidden' value="Yes"/>
    <div class="btn-group btn-toggle">
        <button type="button" class="btn btn-default yes-no" data-radio-name="radio">Yes</button>
        <button type="button" class="btn btn-default yes-no" data-radio-name="radio">No</button>
    </div>
</div>
<div class="col-xs-12 col-md-6 col-md-offset-2 study-question" id="q-2">
    <p><strong>2.</strong> HAVE YOU HAD SHINGLES?</p>
    <input name="radio" type='hidden' value="Yes"/>
    <div class="btn-group btn-toggle">
        <button type="button" class="btn btn-default yes-no btn-1" data-radio-name="radio">Yes</button>
        <button type="button" class="btn btn-default yes-no" data-radio-name="radio">No</button>
    </div>
</div>
</div>

Upvotes: 0

Jeremy Thille
Jeremy Thille

Reputation: 26370

You could simply use :

$("button").click(function() {
    $(this).closest('.study-question').next().show();
});

See this Pen in action.

Upvotes: 1

Related Questions