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

Question

我创建了一个表单，我想使用 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>

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

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

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

Answer 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/

Answer 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>');
}