表单输入到 JavaScript 对象

Question

我熟悉 JavaScript，但不熟悉在 DOM 中使用它。我正在尝试制作一个表单，该表单将接受项目名称 + 属性并将其存储，就像我写出下面的对象一样：

var grocery_list = {
  "Banana": { category: "produce", price: 5.99 },
  "Chocolate": { category: "candy", price: 2.75 },
  "Wheat Bread": { category: "grains and breads", price: 2.99 }
}

这是我拥有的示例 HTML 表单：

  <form>
    <input name="item"><br>
    <input name="category"><br>
    <input name="price"><br>
    <input type="submit" value="do stuff">
  </form>

如何使用 JavaScript 获取上面的输入并将其推送到对象（如上）？

Answer 1

在表单中添加一个监听器，收集值，构建一个对象并将其添加到杂货列表中，例如

<script>
var grocery_list = {}

function addGroceryItem(form) {
  grocery_list[form.item.value] = {category: form.category.value, price: form.price.value};
  return false;
}
</script>

<form onsubmit="return addGroceryItem(this)">
    <input name="item"><br>
    <input name="category"><br>
    <input name="price"><br>
    <input type="submit" value="Add item">
    <input type="button" value="Show list" onclick="console.log(grocery_list)">
</form>

虽然我很想使用普通按钮，而不是提交按钮，并将侦听器放在按钮的onclick处理程序上。