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

我正在自学JS，正在做一个练习，从用户那里获取输入（名字、中间名、姓氏），并将输入保存在JS对象中（稍后我将操作对象本身并对其进行排序，检查重复项等）

我到处都找过了，在这件事上找不到任何方向。我熟悉将HTML输入保存为变量（var n=document.getElementById（'x'）.value），但我对对象非常陌生

如何在对象中保存用户输入？我是否可以将多个“提交”保存在对象中，如“从用户输入加载对象”，然后在以后的步骤中对其进行操作

HTML:

***注意，稍后我计划计算每个名字/中间名/姓氏的频率，并将其输出到屏幕上。。i、 e.：

“FirstName”杰森：2，“FirstName”埃德：3；'MiddleName'Marie:5；'姓氏'Smith:3'

---

我的目标：创建一个全名列表。将他们分为三个列表：名字、中间名和姓氏。计算每个列表中名称的频率---我认为使用对象是最好的方法

您可以使用如下的单击处理程序

var list=[]，
$ins=$（“#姓氏，#中间名，#姓氏”），
计数器={
名字：{}，
中间名：{}，
姓氏：{}
};
$（'#添加'）。单击（函数（）{
var obj={}，
有效=真；
$ins.each（函数（）{
var val=this.value.trim（）；
if（val）{
obj[this.id]=val；
}否则{
var name=this.previousSibling.nodeValue.trim（）；
警报（name.substring（0，name.length-1）+‘不能为空’；
这是focus（）；
有效=错误；
返回false；
}
});
如果（有效）{
列表推送（obj）；
$ins.val（“”）；
$。每个（对象、功能（键、值）{
变量计数=计数器[键][值]| | 0；
计数器[键][值]=计数+1；
});
}
});
$（“#打印”）。单击（函数（）{
$（'pre'）.text（JSON.stringify（list）+'\n\n'）；
$（'pre'）.append（document.createTextNode（JSON.stringify（counter））；
})

pre{
空白：预包装；
}

名字：




中名：




姓氏：




添加到列表中
印刷品

Js对象非常容易操作（这常常使它更容易出错）。如果你想添加一个属性，只需给它加上一些值

function buildList(){
        var list = {};
        $("body").find("input").each(function() {

            var field= $(this).attr('id');
            var value= $(this).val();
            list[field] = value;
        });
}

---

您可以从输入创建一个对象（它们在给定标记中的外观），如：

---

.

如果您的目标是映射每个名称的频率，那么使用三个哈希可能是最有效的选择。仅以其中一个输入为例：

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

---

这样，您将得到类似于

var firstNames={tom:3，dick:10，harry:2，…}

。这里有一把小提琴：

在[]和{}之间有区别

push（）方法和length属性仅适用于[]，因为它实际上是JavaScript数组

因此，在您的情况下，应该将JSON对象放在JSON数组中

list.push({
    firstName: document.getElementById("firstName").value,
    middleName: document.getElementById("middleName").value,
    lastName: document.getElementById("lastName").value
});

如果您喜欢这样做，那么您可以在按钮单击事件中按

---

如何从用户提供的名称字段中搜索特定关键字

var list=[]，
$ins=$（“#姓氏，#中间名，#姓氏”），
计数器={
名字：{}，
中间名：{}，
姓氏：{}
};
$（'#添加'）。单击（函数（）{
var obj={}，
有效=真；
$ins.each（函数（）{
var val=this.value.trim（）；
if（val）{
obj[this.id]=val；
}否则{
var name=this.previousSibling.nodeValue.trim（）；
警报（name.substring（0，name.length-1）+‘不能为空’；
这是focus（）；
有效=错误；
返回false；
}
});
如果（有效）{
列表推送（obj）；
$ins.val（“”）；
$。每个（对象、功能（键、值）{
变量计数=计数器[键][值]| | 0；
计数器[键][值]=计数+1；
});
}
});
$（“#打印”）。单击（函数（）{
$（'pre'）.text（JSON.stringify（list）+'\n\n'）；
$（'pre'）.append（document.createTextNode（JSON.stringify（counter））；
})

pre{
空白：预包装；
}

名字：




中名：




姓氏：




添加到列表中
印刷品

@jward01类似的东西@bassxzero代码不错，但您不需要将对象保存在隐藏输入中，您可以使用全局变量.@shyammakwana.me我知道这一点，但考虑到OP在理解客户端数据存储的位置/方式时遇到了困难，我希望尽可能清楚/简单。非常感谢。though@bassxzero对就这样！！非常感谢你写了这篇文章，并向我展示了它是如何工作的。现在我只需要检查它，了解它是如何工作的以及为什么工作的，这样我就可以像你们一样掌握它了！！我相信，一旦一个人了解了它，它就会变得非常简单。多谢各位@shyammakwana.me——你说的“隐藏输入”是什么意思？谢谢！！在他的应用程序中，这将在每次按下按钮时覆盖firstName属性值，而不是将其添加到列表中并维护计数。在简单的JS对象中。

function buildList(){
        var list = {};
        $("body").find("input").each(function() {

            var field= $(this).attr('id');
            var value= $(this).val();
            list[field] = value;
        });
}

var firstNames = {};

function setFirstName(firstName){

    if(firstNames[firstName] === undefined){
        firstNames[firstName] = 1;
        return;
    }
    firstNames[firstName]++;
}

function buildList(){

    setFirstName(document.getElementById('firstName').value);

}

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

list.push({
    firstName: document.getElementById("firstName").value,
    middleName: document.getElementById("middleName").value,
    lastName: document.getElementById("lastName").value
});