如何从表单中获取信息并将其附加到表中

Question

我正在创建一个网站，我需要从表单中获取信息，并将其存储在其他人都能看到的表中。

例如，每次有人填写表格并按下"；提交"；，用户被带到另一个创建表的页面。该表将附加用户刚刚输入的信息。如果刷新了选项卡或其他人访问了网站，则表中的信息仍将存在。

我相信我需要一个服务器，所以如果有任何关于如何使用服务器的指导，我将不胜感激-有关于这方面的评论，现在我需要回答下面的问题

然而，更具体地说，我希望至少能够使用本地存储来找到保存数据并将其保存在表中供至少一个用户使用的技术。

我在下面有一些代码试图使用本地存储，但它目前不起作用。我在其他地方有一个表单，我还在另一个页面中调用div myresult。非常感谢您的帮助。谢谢

function refresh() {
const result = document.getElementById("myresult");
const saved = JSON.parse(localStorage.getItem("save"));
if (saved) {
const t =
`<table>
<tr>
<th>Name</th>
<th>LastName</th>
</tr>
<tr>
<td>${saved.name}</td>
<td>${saved.lastname}</td>
</tr>
</table>`;
myresult.innerHTML = t;
}
const form = document.getElementById("myform");
form.addEventListener("submit", e => {
e.preventDefault(); 
const {
elements
} = form;
const output = {
name: elements.name.value, 
lastname: elements.lastname.value,
};
localStorage.setItem("save", JSON.stringify(output));
const template =
`<table>
<tr>
<th>Name</th>
<th>LastName</th>
</tr>
<tr>
<td>${output.name}</td>
<td>${output.lastname}</td>
</tr>
</table>`;
myresult.innerHTML = template;
})
}

Answer 1

这里的主要问题是您对form元素的使用。假设您的表单具有以下样式：

<form id="myform">
<input placeholder="Name">
<input placeholder="LastName">
<input type="submit">
</form>

当您使用JavaScript选择器进行选择时，首先要执行以下操作：

const {
elements
} = form;

尝试console.log()来确定元素是什么，您可能会注意到元素看起来可能与代码所假设的有点不同。当您console.log()(它显示在浏览器控制台中，您可以使用右键单击、检查元素和找到名为console的选项卡来找到该控制台(时，响应将类似于：

{
0: <input placeholder="Name">,
1: <input placeholder="LastName">,
2: <input type="submit">
}

可能会有一些其他的JavaScript术语，但这是肉。当你这样做：

const output = {
name: elements.name.value, 
lastname: elements.lastname.value,
};

elements对象内部没有名为name或lastname的值。而是0和1。因此，我们改变输出的方式是：

const output = {
name: elements[0].value, 
lastname: elements[1].value,
};

这与访问数组不同，因为我们在0和1的键处访问elements。最后一步是将其添加到代码中。我随意删除了半重复的代码(创建HTML并将其添加到页面中(，因为您所要做的就是从表单提交侦听器中调用refresh()，然后当它再次检查时，您将从概念上看到本地存储是如何工作的注意：如果您在HTML监听器中调用refresh，监听器不应该在refresh函数中，因为它只会拍打第二个监听器，这意味着下次尝试提交时，它将尝试多次提交！

以下是这些更新后的代码。请注意，该代码在StackOverflow代码段中不起作用，因为无法访问本地存储。如果你想简单地测试一下，我建议你使用codepen.io，它可以让你轻松地运行HTML、CSS和JS，并允许你访问本地存储。

function refresh() {
const result = document.getElementById("myresult");
const saved = JSON.parse(localStorage.getItem("save"));
if (saved) {
const t =
`<table>
<tr>
<th>Name</th>
<th>LastName</th>
</tr>
<tr>
<td>${saved.name}</td>
<td>${saved.lastname}</td>
</tr>
</table>`;
myresult.innerHTML = t;
}
}
const form = document.getElementById("myform");
form.addEventListener("submit", e => {
e.preventDefault(); 
const {
elements
} = form;
console.log(elements);
const output = {
name: elements[0].value, 
lastname: elements[1].value,
};
console.log(output);
localStorage.setItem("save", JSON.stringify(output));
refresh();
})

/* CSS to help with displaying the table*/
table, th, td {
border: 1px solid black;
}
th, td {
color: black;
}

<form id="myform">
<input placeholder="Name">
<input placeholder="LastName">
<br>
<input type="submit">
</form>
<div id="myresult">I added the div element here, but myresult may be a different tag than this</div>