輸入JavaScript對象

我熟悉JavaScript，但不熟悉在DOM中使用它。我試圖做一個形式，將接受一個項目名稱+性能和存儲它就像我寫了下面的對象：輸入JavaScript對象

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將上面的輸入推送到一個對象（如上所述）？

來源

2014-12-03 theartofbeing

您應該使用提交偵聽器來從輸入中獲取值，構造所需的對象並將其添加到* grocery_list *中。然後取消提交。您也可以使用普通按鈕並將偵聽器放在按鈕上。 – RobG 2014-12-03 06:50:22

@RobG這是一個JQuery的東西嗎？ – theartofbeing 2014-12-03 06:54:12

不可以。您可以*使用jQuery，但它不會在此處添加任何值。 – RobG 2014-12-03 07:00:10

向表單中添加一個偵聽器，收集這些值，構建一個對象並將其添加到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處理。

來源

2014-12-03 06:59:14 RobG

我在運行時遇到錯誤：http://jsfiddle.net/rm7jK/1/ – theartofbeing 2014-12-03 07:07:16

「小提琴」沒有使用我的代碼。這段代碼可以在Safari瀏覽器中運行，並且每個瀏覽器都可以運行在IE 6上，可能會更老一些（除了console.log部分）。 – RobG 2014-12-03 07:09:24

我只是彈出它在我的文本編輯器/ HTML文件，並可以看到它打印到console.log ...謝謝！當我將腳本代碼從HTML移動到單獨鏈接的JS文件時，我沒有定義grocery_list。任何想法爲什麼？ – theartofbeing 2014-12-03 07:16:33

這可能與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(); 
});

通過listenting到窗體上的一個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/

UPDATE 如robg指出的，存儲在一個對象，而不是陣列中的對象也可被做容易：

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

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

來源

2014-12-03 07:00:52 MorKadosh

謝謝。做這三件事情是什麼：parseFloat（price）; - console.log（JSON.stringify（objects））; - e.preventDefault（）; – theartofbeing 2014-12-03 07:02:31

'parseFloat'代表將字符串轉換爲浮動字符串（我假設你不想將字符串作爲價格..）'控制檯。log'是一個調試工具，將值輸出到控制檯工具（在線閱讀有關開發人員工具的更多信息），最後，'JSON.stringify'將值轉換爲JSON（您不必在您的案例中使用它，我按順序使用它以顯示輸出） – MorKadosh 2014-12-03 07:08:34

OP將項目存儲在對象中，而不是數組。 – RobG 2014-12-03 07:10:47

輸入JavaScript對象

回答

相關問題