I have a 7 questions long form and I need to display it one question per time. By clicking on the button it should display 2 question and so on and I will submit it after the form is pleted. I really can't figure out how to do this. Any help please ?☺

I have a 7 questions long form and I need to display it one question per time. By clicking on the button it should display 2 question and so on and I will submit it after the form is pleted. I really can't figure out how to do this. Any help please ?☺

• javascript
• jquery
• meteor

2 Answers 2

Assign an ID to the form (e.g. 'myForm') and group each question within the form with a DIV of its own with a mon class (e.g. 'group').

Use jQuery to detect the # of questions and control which question is displayed as the user advances through the form. Add special handling for the final question. This solution allows you to add properly-classed questions willy-nilly without worrying about which questionID should be called after it.

HTML:

<form id="myForm" action="yourpage.something">
    <div class="group">
        <label for="value1">Value 1</label>
        <input type="text" id="value1" name="value1" />
    </div>
    <div class="group">
        <label for="value2">Value 2</label>
        <input type="text" id="value2" name="value2" />
    </div>
    <!-- as many questions as you want -->
    <div class="group">
        <label for="value7">Value 7 (last one)</label>
        <input type="text" id="value7" name="value7" />
    </div>
    <div>
        <button id="btnNext" type="submit">Next</button>
    </div>
</form>

jQuery:

var q = 1, qMax = 0;

$(function () {
    qMax = $('#myForm div.group').length;
    $('#myForm div.group').hide();
    $('#myForm div.group:nth-child(1)').show();
    $('#btnNext').on('click', function (event) {
        event.preventDefault();
        handleClick();
    });
});

function handleClick() {
    if (q < qMax) {
        $('#myForm div.group:nth-child(' + q + ')').hide();
        $('#myForm div.group:nth-child(' + (q + 1) + ')').show();
        if (q == (qMax - 1)) {
            $('#btnNext').html('Submit Answers');
        }
        q++;
    } else {
        alert('Submitting'); // Add code to submit your form
    }
}

Demo fiddle: http://jsfiddle/BenjaminRay/ys8fzdno/

create div around any input with class name of "questionholder" and a toggle link that hides all questionholders but shows the next question. the last question should have a submit button instead of the toggle link:

html:

<form action="blob">
    <div class="questionholder" id="question1" style="display:block">
        Question 1: blob<br>
        <input name="answer1"><br>
        <a onclick="displayquestion(2)">next</a>
    </div>

    <div class="questionholder" id="question2" style="display:none">
        Question 2: blob<br>
        <input name="answer2"><br>
        <a onclick="displayquestion(3)">next</a>
    </div>
.
.
.

    <div class="questionholder" id="question7" style="display:none">
        Question 7: blob<br>
        <input name="answer7"><br>
        <input type="submit" value="submit">
    </div>
</form>

jquery:

function displayquestion(a){
    $(".questionholder").stop().hide();
    $("#question"+a).stop().show();
}