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

Answer 1

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

<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 处理程序上。

Answer 2

这可以通过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();
}

http://jsfiddle.net/70fnct9c/

<强>更新正如robg所说，将对象存储在对象而不是数组中也可以轻松完成：

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

http://jsfiddle.net/70fnct9c/2/

表单输入到JavaScript对象

2 个答案: