JavaScript对象的表单输入

我熟悉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获取上面的输入并将其推送到对象（如上所述）？

向表单添加侦听器，收集值，构建对象并将其添加到列表中，例如

var\u list={}
函数addGroceryItem（表单）{
杂货清单[form.item.value]={category:form.category.value，price:form.price.value}；
返回false；
}

---

尽管我会尝试使用普通按钮，而不是提交按钮，并将侦听器放在按钮的onclick处理程序上。

这可以通过jQuery轻松完成：

var objects = [];
$('form').on('submit', function(e){
    var item = $('#item').val(), category = $('#category').val(), price = $('#price').val();
    objects.push({item:{'category':category, 'price':parseFloat(price)}});
    console.log(JSON.stringify(objects));
    e.preventDefault();
});

通过在表单上侦听

submit

事件，填充对象并将其推送到对象数组中。关于从DOM读取值，请参阅获取这些值的

$（'#input_id'）.val（）

假设您考虑纯JS，也可以这样做：

var objects = [];
var form = document.getElementById('form');
form.onsubmit = function(e){
    var item = document.getElementById('item').value, category =document.getElementById('category').value, price = document.getElementById('price').value;
    objects.push({item:{'category':category, 'price':parseFloat(price)}});
    console.log(JSON.stringify(objects));
    e.preventDefault();
}


更新
正如robg所指出的，将对象存储在对象而不是数组中也很容易：

var objects = {}
................
................
objects[item] = {'category':category, 'price':parseFloat(price)}

您应该使用一个提交侦听器，从输入中获取值，构造所需对象并将其添加到列表中。然后取消提交。您也可以使用普通按钮并将侦听器放在按钮上。@RobG这会是JQuery吗？不。您可以使用JQuery，但它不会在这里增加任何值。谢谢。这三件事在做什么：价格浮动console.log（JSON.stringify（objects））；-e、 预防默认值（）
parseFloat
代表将字符串转换为float（我假设您不希望字符串作为价格…）
console.log
是一个调试工具，用于将值打印到控制台工具（在线阅读更多关于开发人员工具的信息），最后，
JSON.stringify
将值转换为JSON（你不必在你的情况下使用它，我使用它是为了显示输出）OP将项目存储在一个对象中，而不是数组中。这个“小提琴”没有使用我的代码。该代码在Safari和IE 6的每个浏览器中都有效，可能更旧（当然除了console.log部分）。我只是在我的文本编辑器/HTML文件中弹出它，可以看到它打印到console.log…谢谢！当我将脚本代码从HTML移动到链接到的单独JS文件时，我得到的是未定义的杂货列表。有什么想法吗？不知道，检查杂货列表是否已定义。我实际上已经在Windows 2000上的IE 6中测试过它-虚拟机不是很棒吗；-)它是在您的脚本中定义的，但当我将该脚本从HTML页面移到链接的JS文件中时，控制台中似乎出现错误，表示它未定义：/
var objects = {}
................
................
objects[item] = {'category':category, 'price':parseFloat(price)}