Javascript 使表单中的每个输入逐个显示？

Im使用jquery，希望每个表单文本输入逐个显示，用户输入数据，然后显示下一个。在他们完成整个表格的单个问题部分后，我希望提交整个表格的回答

这可能吗？或者我必须使表单整体显示才能得到我想要的结果

---

提前感谢。

我建议将所有输入都保存在表单中，并在用户完成一个输入后简单地隐藏和显示

$("#next").click(function() {        
    $("input").hide();
    $("input").eq(++currentIndex).show();
});

---

可以渲染整个表单，将每个表单元素包装在一个div中：

<form>
  <div class="control-wrap">
    <label for="a">Field label</label>
    <input type="text" name="a">
  </div>
  <div class="control-wrap">
    <label for="b">Second Field label</label>
    <input type="text" name="b">
  </div>
  ...
</form>

这过于简单，只适用于文本字段，但希望它能作为一个起点。

试试这个

            $(document).ready(function(){
                $('input:text').keypress(function(e){

                    var code = (e.keyCode ? e.keyCode : e.which);
                     if(code == 13) { //Enter keycode
                       $(this).next().show();
                       $(this).hide();
                     }
                });

            });

---

有些东西可以让你开始。

锚触发新的输入

$(document).on('click','a.more-inputs',function(){
    $lastInput = $(this).prev('input[type="text"]'); //anchor should be next element of present input otherwise use a different selector input.one-more:last-child or so
    if($lastInput.val() && $lastInput){
        $(this).before($lastInput.clone().val(''));//anchor should be where last comment says or else use different code
        }
    else{
        $lastInput.focus();
        }
    return false;
    });

$(document).on('blur','input[type="text"].one-more',function(){
    $lastInput = $(this);
    if($lastInput.val() && $lastInput){
        $(this).after($lastInput.clone().val(''));
        }
    else{
        $lastInput.focus(); //fill this before getting next one
        }
    return false;
    });

$(document).on('keypress','input[type="text"].one-more',function(e){
    if(e.keyCode == 13){
     $lastInput = $(this);
      if($lastInput.val() && $lastInput){
        $(this).after($lastInput.clone().val(''));
        }
     else{
        $lastInput.focus(); //fill this before getting next one
        }
    }
    return false;
    });

填充输入触发新输入的模糊事件

$(document).on('click','a.more-inputs',function(){
    $lastInput = $(this).prev('input[type="text"]'); //anchor should be next element of present input otherwise use a different selector input.one-more:last-child or so
    if($lastInput.val() && $lastInput){
        $(this).before($lastInput.clone().val(''));//anchor should be where last comment says or else use different code
        }
    else{
        $lastInput.focus();
        }
    return false;
    });

$(document).on('blur','input[type="text"].one-more',function(){
    $lastInput = $(this);
    if($lastInput.val() && $lastInput){
        $(this).after($lastInput.clone().val(''));
        }
    else{
        $lastInput.focus(); //fill this before getting next one
        }
    return false;
    });

$(document).on('keypress','input[type="text"].one-more',function(e){
    if(e.keyCode == 13){
     $lastInput = $(this);
      if($lastInput.val() && $lastInput){
        $(this).after($lastInput.clone().val(''));
        }
     else{
        $lastInput.focus(); //fill this before getting next one
        }
    }
    return false;
    });

按enter键打开当前输入，触发新输入

$(document).on('click','a.more-inputs',function(){
    $lastInput = $(this).prev('input[type="text"]'); //anchor should be next element of present input otherwise use a different selector input.one-more:last-child or so
    if($lastInput.val() && $lastInput){
        $(this).before($lastInput.clone().val(''));//anchor should be where last comment says or else use different code
        }
    else{
        $lastInput.focus();
        }
    return false;
    });

$(document).on('blur','input[type="text"].one-more',function(){
    $lastInput = $(this);
    if($lastInput.val() && $lastInput){
        $(this).after($lastInput.clone().val(''));
        }
    else{
        $lastInput.focus(); //fill this before getting next one
        }
    return false;
    });

$(document).on('keypress','input[type="text"].one-more',function(e){
    if(e.keyCode == 13){
     $lastInput = $(this);
      if($lastInput.val() && $lastInput){
        $(this).after($lastInput.clone().val(''));
        }
     else{
        $lastInput.focus(); //fill this before getting next one
        }
    }
    return false;
    });

---

哇，每个人都比我快，我要把手伸进锅里：

向您展示了我提出的实现。它显示了基本上如何遍历表单以获取下一个容器，并在按下enter键（13）时显示它

别忘了停止Propagation/preventDefault，否则当按下enter键时，您将最终提交表单

---

当项是调用$（this.parents（“表单”）.submit（）的最后一个元素时，可以添加一个例外；而不是试图找到下一个元素并显示它。

但是，您肯定可以这样做。。。。为什么？在当前输入的哪个点上应该显示下一个？你怎么知道他们什么时候“完成”了输入？我尝试将每个响应存储在一个数组中，然后努力将其发送到后端。我真的不能保证一个好的实施。用户将按enter键转到下一个问题。我不想一下子被一系列的问题淹没，我宁愿错开它。你可以用name=someName[]存储所有输入，在提交表单后，它将作为数组提供。听起来我的用户体验很糟糕。你至少需要一个按钮来显示下一个问题，这样项目就不会凭空出现。谢谢David，我会尝试一下，你说得对，Juan，除了可以使用enter键继续操作之外，我还会添加一个。提交表单后，你可以使用name=someName[]存储所有输入，它将作为数组提供。作者@David Cheung非常感谢，这似乎非常适合我的需要。我只需要添加那个例外并隐藏旧的表单元素，它就完美了。如果我想包含一个下拉框，你能帮我实现吗？@MarkRobbo:如果你使用Sizzle（jquery）选择器

：input

，它会选择任何表单输入。只是要小心，因为它比

input

慢，而且会选择submit按钮等等。