通过表单javascript将数据添加到数组/对象
[英]add data to array/object via form javascript
问题描述
I have a form.
我有一个表格。 If you fill in the form, the data must be placed in the constant USERS with (vanilla) javascript.如果您填写表格，则必须使用（vanilla）javascript 将数据放置在常量 USERS 中。 Can somebody help me, please?有人可以帮我吗？
It is also intended that the CONST USERS will be shown in the div 'show', but doesn't have to.还打算将 CONST 用户显示在 div 'show' 中，但不是必须的。
My Code:我的代码：
<!DOCTYPE html>
<head>
<title>Users</title>
</head>
<body>
<main>
<form>
<label for="ordername">Name:</label>
<input type="text" id="name" name="name"/>
<label for="age">Age:</label>
<input type="number" id="age" name="age"/>
<input type="submit" value="submit" class="submit"/>
</form>
<div class="show">
</div>
</main>
<script>
const USERS = [
{
name: Brit,
age: 45,
},
{
name: John,
age: 55,
}];
</script>
</body>
</html>
2 个解决方案
解决方案1
0 2019-12-19 13:25:25
in your code const = USERS is also not a valid.在您的代码中const = USERS也无效。 read syntax before use.使用前阅读语法。
You can push as below您可以按如下方式推送
const USERS = []; var form_el = document.getElementById("myForm"); form_el.addEventListener("submit", function(evt) { evt.preventDefault(); var name = document.getElementById("name").value; var age = document.getElementById("age").value; var objsingle = {}; objsingle.name = name; objsingle.age = age; USERS.push(objsingle); //console.log(USERS); document.getElementById("show").innerHTML = JSON.stringify(USERS); });
<!DOCTYPE html> <head> <title>Users</title> </head> <body> <main> <form id="myForm"> <label for="ordername">Name:</label> <input type="text" id="name" name="name"/> <label for="age">Age:</label> <input type="number" id="age" name="age"/> <input type="submit" value="submit" class="submit"/> </form> <div class="show" id="show"> </div> </main> </body> </html>
解决方案2
0 2019-12-19 14:42:36
In your code with the provided users example, you have
name: Britandname: John, They should be strings like,name: "Brit", andname: "John".在提供用户示例的代码中，您有name: Brit和name: John，它们应该是类似name: "Brit"和name: "John"字符串。In your comment
"Oh I forgot to say if I leave the website again that the data will remain on the webpage"do you mean using something likelocalstorage?在您的评论中"Oh I forgot to say if I leave the website again that the data will remain on the webpage"，您的意思是使用localstorage类的localstorage吗？
The following snippet should do it:以下代码段应该这样做：
<!DOCTYPE html>
<head>
<title>Users</title>
</head>
<body>
<main>
<form id="user-form">
<label for="ordername">Name:</label>
<input type="text" id="name" name="name"/>
<label for="age">Age:</label>
<input type="number" id="age" name="age"/>
<input type="submit" value="submit" class="submit"/>
</form>
<div class="show"></div>
</main>
<script>
const users = JSON.parse(localStorage.getItem("users") || "[]");
console.log(users);
const form = document.getElementById("user-form");
form.addEventListener("submit", function(e) {
e.preventDefault();
const name = document.getElementById("name").value;
const age = document.getElementById("age").value;
const user = { name, age };
users.push(user);
localStorage.setItem("users", JSON.stringify(users));
console.log(users);
});
</script>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.