javascript - 如何显示表单 - 使用 jQuery、javascript 或 Meteor js 每次只显示一个输入字段？

Question

我有一个 7 个问题的长表，我需要每次显示一个问题。通过单击按钮，它应该显示 2 个问题等等，我将在表格完成后提交。我真的不知道该怎么做。有什么帮助吗？☺

Answer 1

为表单分配一个 ID(例如“myForm”)并将表单中的每个问题与一个具有公共(public)类(例如“group”)的 DIV 分组。

使用 jQuery 检测问题的数量并控制在用户浏览表单时显示哪个问题。为最后一个问题添加特殊处理。此解决方案允许您随意添加正确分类的问题，而不必担心应该在其后调用哪个问题 ID。

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
    }
}

演示 fiddle :http://jsfiddle.net/BenjaminRay/ys8fzdno/