如何将HTML表单输入存储为JavaScript对象

我正在自学JS并进行一项练习,该练习从用户输入(名字,中间名,姓氏),并将输入保存在JS对象中(稍后我将操纵对象本身并对其进行排序,检查重复项,等等.)

我到处寻找,找不到任何方向.我熟悉将HTML输入保存为变量(var n = document.getElementById(‘x’).value)但我对对象很新.

如何在对象中保存用户输入？我可以在对象中保存多个“提交”,如“从用户输入加载对象”,然后在稍后的步骤中操作它吗？

HTML：

irst Name:
    irst Name">
  

我想象的JS对象看起来像,每次用户按下“添加到列表”时,程序会在列表中添加另一个First / Middle / Last名称：

var list = {
    firstName:"John",middleName:"Will",lastName:"Doe"
},{
    firstName:"Ben",middleName:"Thomas",lastName:"Smith"
},{
    firstName:"brooke",middleName:"James",lastName:"Kanter"
};

***注意,稍后我计划计算每个First / Middle / Last Name的频率并将其输出到屏幕上..即：’FirstName’Jason：2,’FirstName’Ed：3; “MiddleName’Marie：5; ‘LastName’Smith：3’

我的目标：创建一个全名列表.将它们分成三个列表：第一个,中间名和姓氏.计算每个列表中名称的频率. —我认为使用对象将是最好的方法.

最佳答案

你可以使用像这样的点击处理程序

var list = [],$ins = $('#firstName,#middleName,#lastName'),counter = {
    firstName: {},middleName: {},lastName: {}
  };
$('#add').click(function() {
  var obj = {},valid = true;
  $ins.each(function() {
    var val = this.value.trim();
    if (val) {
      obj[this.id] = val;
    } else {
      var name = this.prevIoUsSibling.nodeValue.trim();
      alert(name.substring(0,name.length - 1) + ' cannot be blank');
      this.focus();
      valid = false;
      return false;
    }
  });
  if (valid) {
    list.push(obj);
    $ins.val('');

    $.each(obj,function(key,value) {
      var count = counter[key][value] || 0;
      counter[key][value] = count + 1;
    });

  }
});

$('#print').click(function() {
  $('pre').text(JSON.stringify(list) + '\n\n');
  $('pre').append(document.createTextNode(JSON.stringify(counter)));
})

pre {
  white-space: pre-wrap;
}