如何将HTML表单输入存储为JavaScript对象
[英]How to store HTML form input as JavaScript Object
问题描述
我正在自学JS并进行一项练习，该练习从用户输入（名字，中间名，姓氏），并将输入保存在JS对象中（稍后我将操纵对象本身并对其进行排序，检查重复项，等等。）
我到处寻找，找不到任何方向。 我熟悉将HTML输入保存为变量（var n = document.getElementById（'x'）。value）但我对对象很新。
如何在对象中保存用户输入？ 我可以在对象中保存多个“提交”，如“从用户输入加载对象”，然后在稍后的步骤中操作它吗？
HTML：
<body>
<label>First Name:
<input type='text' name='firstName' id='firstName' placeholder="First Name">
</label>
<br>
<br>
<label>Middle Name:
<input type='text' name='middleName' id='middleName' placeholder="Middle Name">
</label>
<br>
<br>
<label>Last Name:
<input type='text' name='lastName' id='lastName' placeholder="Last Name">
</label>
<br>
<br>
<button type="button" onclick="buildList()">Add to List</button>
</body>
我想象的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' 'FirstName'Jason: 2, 'FirstName'Ed:3; 'MiddleName'Marie:5; 'LastName'Smith:3'
我的目标：创建一个全名列表。 将它们分成三个列表：第一个，中间名和姓氏。 计算每个列表中名称的频率。 ---我认为使用对象将是最好的方法。
6 个解决方案
解决方案1
3 已采纳 2015-07-10 04:21:57
你可以使用像这样的点击处理程序
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; }
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <!-- To show result in the dom instead of console, only to be used in the snippet not in production --> <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <label>First Name: <input type='text' name='firstName' id='firstName' placeholder="First Name"> </label> <br> <br> <label>Middle Name: <input type='text' name='middleName' id='middleName' placeholder="Middle Name"> </label> <br> <br> <label>Last Name: <input type='text' name='lastName' id='lastName' placeholder="Last Name"> </label> <br> <br> <button type="button" id="add">Add to List</button> <button type="button" id="print">Print</button> <pre></pre>
解决方案2
1 2015-07-10 04:24:42
Js对象很容易操作（这很多次都会导致更多错误）。 如果你想添加一个属性，只需添加一些值。
var info = {};//create an empty object
info.firstName = document.getElementById('firstName').value;
info.lastName = document.getElementById('lastName').value;
allInfo.push(info);//you had to initialize the array before
解决方案3
0 2015-07-10 04:24:46
您可以从输入创建一个对象（因为它们在给定的标记中查找），如：
function buildList(){
var list = {};
$("body").find("input").each(function() {
var field= $(this).attr('id');
var value= $(this).val();
list[field] = value;
});
}
小提琴 。
解决方案4
0 2015-07-10 04:32:15
如果您的目标是映射每个名称的频率，则使用三个哈希可能是最有效的选项。 仅作为其中一个输入的示例：
var firstNames = {};
function setFirstName(firstName){
if(firstNames[firstName] === undefined){
firstNames[firstName] = 1;
return;
}
firstNames[firstName]++;
}
function buildList(){
setFirstName(document.getElementById('firstName').value);
}
这样你就会得到类似var firstNames = {tom: 3, dick: 10, harry: 2, ...} 。 这是一个小提琴： https ： //jsfiddle.net/n3yhu6as/2/
解决方案5
0 2015-07-10 05:04:33
[]和{}之间存在差异
push（）方法和length属性仅适用于[]，因为它实际上是JavaScript数组
因此，在您的情况下，您应该将JSON对象放在JSON数组中
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
});
解决方案6
0 2016-07-09 09:11:05
如何从用户提供的名称字段中搜索特定关键字。
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; }
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <!-- To show result in the dom instead of console, only to be used in the snippet not in production --> <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <label>First Name: <input type='text' name='firstName' id='firstName' placeholder="First Name"> </label> <br> <br> <label>Middle Name: <input type='text' name='middleName' id='middleName' placeholder="Middle Name"> </label> <br> <br> <label>Last Name: <input type='text' name='lastName' id='lastName' placeholder="Last Name"> </label> <br> <br> <button type="button" id="add">Add to List</button> <button type="button" id="print">Print</button> <pre></pre>
如何从HTML表单获取用户输入并将其存储在现有的JavaScript数组中
[英]How can I get the user input from a HTML form and store it in an existing JavaScript array
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.