0

我需要编写一个可以包含多个个人信息的页面。客户将填写几条个人信息记录，然后一次全部提交。

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

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

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

我敢肯定之前有人遇到过这个问题，有什么好的解决方案建议吗？

非常感谢。

4

2 回答 2

0

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

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

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

  1. 验证输入
  2. 隐藏字段集
  3. 显示下一个
  4. 更新当前/总步数的指标

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

于 2012-08-16T06:34:55.820 回答
0

考虑到你有这样的 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 不关心你有多少字段并且提交表单将按预期工作

于 2012-08-15T15:15:25.673 回答