在多步骤向导中提交之前获取所有输入值以供审核 - 如何？答案

【问题标题】：Get all input values for review before submission in multi-step wizard - How?在多步骤向导中提交之前获取所有输入值以供审核 - 如何？
【发布时间】：2014-02-03 23:03:56
【问题描述】：

我创建了一个多步骤模式，每个选项卡窗格上都有一个表单输入。（使用引导选项卡）。在最后一步，我希望显示所有表单字段以供审核，以便用户可以在单击提交之前检查所有内容。

我将如何获取所有输入值并将它们附加到最后一页？最后一个标签是 id #step5。我尝试只使用一个简单的

$('#dateReview').append($('#date').val());

但是，它立即使用日期更新了新的 div ID，一旦用户到达向导的最后一步，我需要更新它。或者也许 on('change') 但我似乎无法得到比工作。

有人对此有简单的解决方案吗？

【问题讨论】：

标签： javascript jquery html forms twitter-bootstrap

【解决方案1】：

如果不涉及页面刷新，那么你可以这样做：

$("#summary").html($("myForm").serialize());

（假设一切都在一个表单中）。

编辑：

根据要求，您可以按以下方式反序列化表单数据：

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>serialize()</title>
  </head>

  <body>
    <form>
        <input type="text" name="firstName" />
        <input type="text" name="lastName" />

        <input type="checkbox" name="check1" value="yes" id="ch1">
        <label for="ch1">Yes</label>
        <input type="checkbox" name="check2" value="no" id="ch2">
        <label for="ch2">No</label>

        <input type="submit" >
    </form>    

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
      $("form").on("submit", function(event){
        var formData = $(this).serialize().split("&");
        console.log("You entered:");

        $.each(formData, function(index, value){
          value = value.split("=");

          // Append to div instead of logging to console
          console.log(value[0] + ": " + value[1]);
        })
        event.preventDefault();
      })
    </script>
  </body>
</html>

【讨论】：

所以我会序列化更改事件的数据，然后将每个表单元素附加到我想要的任何 div 上？
我不确定您的模态是如何工作的以及它触发了哪些事件，但是当用户单击到最后一步时，您应该能够一口气抓住所有内容。如果您可以制作小提琴或发布链接，将会有所帮助。
我不知道如何反序列化数据，你能告诉我吗？我知道如何序列化整个表单，但是我将如何反序列化表单并将其附加到 div？
太棒了，它可以工作，但不适用于 checkboxes 或 textareas 。他们有什么特别需要的吗？