存储来自表单的用户输入并显示摘要答案

【问题标题】：storing user input from form and displaying summary存储来自表单的用户输入并显示摘要
【发布时间】：2012-09-11 18:18:42
【问题描述】：

我创建了一个表单，我想使用 jquery 将标签和用户输入的输入值存储到一个数组中。在表单的底部，有一个下一步按钮，而不是提交。当用户按下下一步时，他们应该会看到所有标签及其输入的摘要。 HTML 是这样的：

<div class="form-item">
    <label>Zip Code:</label>
    <input type="text" />
</div>

<div class="form-item">
    <label>Address:</label>
    <input type="text" />
</div>

我相信解决这个问题的最佳方法是使用 each() 遍历每个 div.form-item，如下所示：

$(".form-item").each(function(){
     var label = $(this).find('label').text(); 
     var input = $(this).find('input').val();
});

我不确定如何使用唯一变量收集多个表单项块。我希望这是完全动态的，所以无论有多少表单字段，它都会起作用。我将它们存储在数组中吗？解决此问题的最佳方法是什么？

【问题讨论】：

应该是$(".form-item").each...

标签： jquery arrays forms

【解决方案1】：

您可以使用map 方法，还要注意您的类选择器不正确，您错过了.。

var arr = $('.form-item').map(function() {
               var lab = $('label', this).text();
               var val = $('input', this).val();
               return lab + val;
          }).get()

http://jsfiddle.net/b5Z6C/2/

【讨论】：

使用 map 比普通数组/push 有优势吗？
@JCHASE11 map 也使用了push 方法，这只是jQuery 创建数组的方式。
谢谢，如何显示 var arr？
不客气。我在fiddle中使用了console.log，你也可以使用alert。
如果我删除该值并输入我自己的值，它不会将该值存储在数组中。见：jsfiddle.net/b5Z6C/5

【解决方案2】：

您可以将它存储在一个数组中，例如：

var els = new Array();
$(".form-item").each(function(){
  els.push({
    label: $(this).find('label').text(), 
    value: $(this).find('input').val()});
});

你可以在后面的代码中做：

for(var i in els){
  $('.where-you-want-it')
    .append('<p>'+els[i].label+'</p><span>'+els[i].value+'</span>');
}

【讨论】：

如何以如下格式显示数组：
label
value？