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

【问题标题】：How to display form - displaying only one input field per time with jQuery, javascript or Meteor js?如何显示表单 - 使用 jQuery、javascript 或 Meteor js 每次只显示一个输入字段？
【发布时间】：2015-05-20 13:09:11
【问题描述】：

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

【问题讨论】：

标签： javascript jquery meteor

【解决方案1】：

围绕类名为“questionholder”的任何输入创建 div，并创建一个切换链接，该链接隐藏所有问题持有者但显示下一个问题。最后一个问题应该有一个提交按钮而不是切换链接：

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();
}

【讨论】：

谢谢，你是天才，你节省了我很多时间！！

【解决方案2】：

为表单分配一个 ID（例如“myForm”），并将表单中的每个问题用一个自己的 DIV 和一个公共类（例如“group”）分组。

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

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

演示小提琴：http://jsfiddle.net/BenjaminRay/ys8fzdno/

【讨论】：