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

从表单存储用户输入并显示摘要

2 个答案: