JavaScript 对象的表单输入答案

【问题标题】：Form input to JavaScript ObjectJavaScript 对象的表单输入
【发布时间】：2015-01-31 15:15:46
【问题描述】：

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

【问题讨论】：

您应该使用提交侦听器从输入中获取值，构造所需的对象并将其添加到 grocery_list。然后取消提交。您也可以使用普通按钮并将侦听器放在按钮上。
@RobG 那会是 JQuery 的东西吗？
没有。您可以使用 jQuery，但它不会在这里添加任何价值。

标签： javascript forms dom

【解决方案1】：

这可以通过 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/

【讨论】：

谢谢。这三件事在做什么：parseFloat(price); - 控制台.log（JSON.stringify（对象））； - e.preventDefault();
parseFloat 代表将字符串转换为浮点数（我假设您不希望字符串作为价格..）console.log 是一个将值打印到控制台工具的调试工具（阅读有关开发人员的更多信息在线工具），最后，JSON.stringify 将值转换为 JSON（您不必在您的情况下使用它，我使用它是为了显示输出）
OP 将项目存储在一个对象中，而不是一个数组中。

【解决方案2】：

向表单添加监听器，收集值，构建对象并将其添加到 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 处理程序上。

【讨论】：

那个“小提琴”没有使用我的代码。此代码适用于 Safari 和 IE 6 的所有浏览器，可能更旧（当然，console.log 部分除外）。
我刚刚在我的文本编辑器/HTML 文件中弹出它，可以看到它打印到 console.log...谢谢！当我将脚本代码从 HTML 移动到我链接到的单独 JS 文件时，我得到未定义的grocery_list。任何想法为什么？
不知道，检查 grocery_list 是否已定义。我实际上已经在 Windows 2000 上的 IE 6 中对其进行了测试——虚拟机不是很好。 ;-)
它是在您的脚本中定义的，但是当我将该脚本移出 HTML 页面并进入链接的 JS 文件时，控制台中似乎出现错误，提示它未定义：/