Question

我需要写一个可能需要多个个人信息的页面。客户将填写几个个人信息记录，然后一次提交。

我希望页面一次只显示一条记录的输入字段。填写一条记录后，客户端可以单击“下一步”按钮继续下一条记录。

我正在考虑使用数组输入编写一个表单并使用javascript来隐藏/显示每个记录。但这个解决方案似乎很麻烦，特别是。当记录数量未知时。是否可以将每个记录的输入字段嵌套到表格或表格单元格中并隐藏/显示此元素？每条记录中的输入字段数量非常大。

我不想提交每条记录，因为它们可以包含图像，并且所有记录都共享一些常见的隐藏值。

我相信之前有人有这个问题，有什么建议可以提供一个简洁的解决方案吗？

非常感谢。

Answer 1

考虑到你有像这样的HTML

<form>
<table id="page-1">
  <input type="text" name="name"/>
  <input type="text" name="surname"/>
</table>
<table id="page-2">
     <input type="text" name="age"/>
</table>
<div id="page-3">
     <input type="submit" name="submit"/>
</div>
</form>
<input id="next" type="button" value="Next"/>

所以你可以用这样的javascript来做到这一点

    var actualPage = 0;
    $("#next").click(function() {
        $("#page-" + actualPage).hide();
        actualPage++;
        if(!$("#page-" + actualPage).length) {
             // this was last page
             $(this).hide();
             return false;
        }
        $("#page-" + actualPage).show();
    });

有很多方法可以做到这一点，我不知道哪一种取决于你提供的最适合你的方式

这样javascript就不关心你拥有多少字段，提交表单会按预期工作

Answer 2

从可用性的角度来看，这不是一个好主意。用户不知道表单的长度，也无法知道总步数和剩余步数。

但是我们可以说这是一个简短形式，你可以给用户一些当前/总步骤的提示。

Yo应该显示整个表单并使用fieldset标签来分隔不同的步骤然后使用javascript隐藏除第一个字段集之外的所有字段集并提供“下一步”按钮
当用户点击“下一步”时，您应该

验证输入
隐藏字段集
显示下一个
更新当前/总步骤的指标

验证很重要，因为如果有多个无效输入，您将无法同时显示所有错误。

单个表单中的多个记录

2 个答案: